如何让Vuetify v-data-table按数据值而非插槽显示值排序

核心思路 #

Vuetify的v-data-table默认按表头value对应的字段值排序，若需自定义排序规则，只需给目标表头配置sort函数，指定具体的比较逻辑即可，这种方式支持多列独立配置。

1. ID列按数值排序（基于纯数字id字段） #

在表头配置中，将ID列的value绑定到纯数字的id字段，同时添加自定义排序函数，把字符串类型的id转为数值后比较：

// 表头配置示例
headerset: [
  {
    text: 'ID',
    value: 'id', // 绑定用于排序的数据源（item.id）
    sortable: true,
    // 自定义数值排序逻辑
    sort: (a, b) => Number(a.id) - Number(b.id)
  },
  // 其他列...
]

表格模板保持不变，通过插槽显示aid字段：

<v-data-table
  :headers="headerset"
  :items="filteredData"
  :search="searchTable"
  height="inherit"
  :loading="loading"
  loading-text="Loading... Please wait"
  style="cursor: pointer"
>
  <template v-slot:item.id="{ item }">
    {{ item.aid }}
  </template>
</v-data-table>

2. 财年/日历年列自定义排序 #

针对CY2022、FY2022这类格式的年份字段，可先提取年份数字排序，再按前缀区分顺序，示例如下：

// 表头中添加年份列的配置
headerset: [
  // ID列配置...
  {
    text: '年份',
    value: 'yearCode', // 绑定item中的年份字段
    sortable: true,
    sort: (a, b) => {
      // 提取年份数字
      const yearA = parseInt(a.yearCode.slice(2));
      const yearB = parseInt(b.yearCode.slice(2));
      // 先按年份数值排序
      if (yearA !== yearB) {
        return yearA - yearB;
      }
      // 年份相同时，按前缀排序（CY优先于FY，反之则调换顺序）
      return a.yearCode.localeCompare(b.yearCode);
    }
  }
]

扩展说明 #

这种方式可覆盖所有需要自定义排序的列，只需给对应表头的sort属性传入比较函数即可。函数接收两个待比较的item对象，返回值为负数、0、正数分别对应前者小于、等于、大于后者。

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