Vuetify 2自定义表头恢复默认排序与筛选功能问题

问题出在你完全自定义了表头的DOM结构，替换了Vuetify默认表头的内置事件和逻辑绑定，导致排序、筛选功能失效。下面给两种可行的解决方案：

方案一：复用Vuetify原生表头组件（推荐） #

这种方式既能自定义样式，又能完整保留所有原生功能（排序、筛选、表头交互）。不用自己写<thead>和<th>，直接使用Vuetify提供的<v-data-table-header>组件，仅自定义样式即可：

修改你的模板代码：

<v-data-table
  :headers="headers"
  :items="items"
  item-key="client"
  :footer-props="footerProps"
  :search="search"
  class="text-body-1"
>
  <!-- 复用原生表头组件，仅自定义样式 -->
  <template #header="{ props }">
    <v-data-table-header
      v-bind="props"
      class="grey white--text text-body-1"
    />
  </template>
</v-data-table>

如果需要对单个表头单元格做更精细的样式控制，可以用#header-cell插槽：

<v-data-table
  :headers="headers"
  :items="items"
  item-key="client"
  :footer-props="footerProps"
  :search="search"
  class="text-body-1"
>
  <template #header-cell="{ header, props }">
    <th
      :class="{
        'grey white--text text-body-1': true,
        'sortable': header.sortable,
        'filter': header.filterable,
      }"
      scope="col"
    >
      {{ header.text }}
      <!-- 自动显示排序图标（仅sortable为true时） -->
      <v-icon v-if="header.sortable">
        {{ props.sortBy === header.value ? (props.sortDesc ? 'mdi-arrow-down' : 'mdi-arrow-up') : '' }}
      </v-icon>
    </th>
  </template>
</v-data-table>

方案二：手动绑定排序事件（完全自定义DOM场景） #

如果一定要自己写完整的<thead>结构，需要手动绑定排序触发事件，并处理排序状态的样式：

<v-data-table
  :headers="headers"
  :items="items"
  item-key="client"
  :footer-props="footerProps"
  :search="search"
  class="text-body-1"
>
  <template #header="{ props }">
    <thead class="v-data-table-header">
      <tr>
        <th
          v-for="header in props.headers"
          :key="header.value"
          :class="{
            'grey white--text text-body-1': true,
            'sortable': header.sortable,
            'filter': header.filterable,
            'sorted-asc': props.sortBy === header.value && !props.sortDesc,
            'sorted-desc': props.sortBy === header.value && props.sortDesc
          }"
          scope="col"
          @click="header.sortable && props.sort(header.value)"
        >
          {{ header.text }}
          <!-- 显示排序方向标识 -->
          <span v-if="header.sortable">
            {{ props.sortBy === header.value ? (props.sortDesc ? '↓' : '↑') : '' }}
          </span>
        </th>
      </tr>
    </thead>
  </template>
</v-data-table>

另外检查你的表头数据：当前示例里的Number和EMP Code列都设置了sortable: false，所以即使修复了逻辑，这两列也不会触发排序。如果需要某列支持排序，把对应的sortable参数改成true即可。

内容的提问来源于stack exchange，提问作者thespace