Vuetify 3中v-data-table如何获取原对象实现自定义排序？

默认情况下，custom-key-sort只会传入指定键对应的值，当对象没有该键时就会得到undefined，没法直接拿到原始对象。要实现基于原始对象嵌套属性或计算值的排序，更合适的方式是使用全局的:custom-sort属性，它直接把两个原始对象作为参数传入。

具体实现示例 #

<v-data-table
  :items="yourItems"
  :headers="yourCustomHeaders"
  :custom-sort="handleCustomSort"
></v-data-table>

<script>
export default {
  data() {
    return {
      yourItems: [{ b: 1 }, { b: 2 }, { b: 0 }],
      yourCustomHeaders: [
        {
          text: '自定义展示列',
          value: 'computedColumn', // 自定义的表头key，对应计算后的展示值
          sortable: true
        }
      ]
    }
  },
  methods: {
    handleCustomSort(a, b, sortBy, sortDesc) {
      // 针对自定义列的排序逻辑
      if (sortBy === 'computedColumn') {
        // 直接操作原始对象的嵌套属性，这里以b属性为例
        const valA = a.b ?? 0; // 处理属性不存在的兜底情况
        const valB = b.b ?? 0;
        // 根据排序方向返回比较结果
        return sortDesc ? valB - valA : valA - valB;
      }
      // 其他列的默认排序逻辑（如果有需要）
      return 0;
    }
  }
}
</script>

为什么不用custom-key-sort？ #

custom-key-sort的设计初衷是针对已知键的简单值排序，它会自动提取指定键的值作为参数，没法直接获取原始对象。而custom-sort提供了更灵活的全局排序控制，直接传入原始对象、当前排序的键和排序方向，完全满足你基于原始对象嵌套属性计算后排序的需求。

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