Vuetify 3.X中能否实现VDataTable多字段排序功能？

在Vuetify 3.X中完全可以实现多字段排序，以下是两种可靠的实现方案：

方案一：利用custom-key-sort的完整参数（推荐） #

Vuetify 3的custom-key-sort配置项中，每个字段的排序函数支持额外的两个参数——当前比较的完整行对象，通过它们可以轻松访问其他字段值，实现多字段排序逻辑。

示例代码 #

模板部分

<v-data-table
  :headers="headers"
  :items="people"
  :custom-key-sort="customSorters"
/>

脚本部分（Options API）

export default {
  data() {
    return {
      people: [
        { name: 'Bob', age: 25 },
        { name: 'Ann', age: 25 },
        { name: 'Bob', age: 21 }
      ],
      headers: [
        { text: 'Name', value: 'name' },
        { text: 'Age', value: 'age' }
      ]
    }
  },
  methods: {
    customSorters() {
      return {
        name: (name1, name2, row1, row2) => {
          // 先按姓名排序
          const nameDiff = name1.toLowerCase().localeCompare(name2.toLowerCase())
          // 姓名相同时，按年龄升序排序
          if (nameDiff === 0) {
            return row1.age - row2.age
          }
          return nameDiff
        },
        age: (age1, age2, row1, row2) => {
          // 先按年龄排序
          const ageDiff = age1 - age2
          // 年龄相同时，按姓名升序排序
          if (ageDiff === 0) {
            return row1.name.toLowerCase().localeCompare(row2.name.toLowerCase())
          }
          return ageDiff
        }
      }
    }
  }
}

方案二：手动监听排序状态，通过计算属性处理排序 #

如果需要更灵活的全局排序逻辑，可以监听VDataTable的排序状态，通过计算属性返回排序后的结果。

示例代码 #

模板部分

<v-data-table
  :headers="headers"
  :items="sortedPeople"
  v-model:sort-by="sortBy"
  v-model:sort-desc="sortDesc"
/>

脚本部分（Composition API）

import { ref, computed } from 'vue'

export default {
  setup() {
    const people = ref([
      { name: 'Bob', age: 25 },
      { name: 'Ann', age: 25 },
      { name: 'Bob', age: 21 }
    ])
    const headers = ref([
      { text: 'Name', value: 'name' },
      { text: 'Age', value: 'age' }
    ])
    // 维护当前排序字段和排序方向
    const sortBy = ref(['name'])
    const sortDesc = ref([false])

    // 计算排序后的列表
    const sortedPeople = computed(() => {
      const items = [...people.value]
      const [currentSortKey] = sortBy.value
      const [isDescending] = sortDesc.value

      items.sort((row1, row2) => {
        let comparison = 0
        if (currentSortKey === 'name') {
          comparison = row1.name.toLowerCase().localeCompare(row2.name.toLowerCase())
          if (comparison === 0) {
            comparison = row1.age - row2.age
          }
        } else if (currentSortKey === 'age') {
          comparison = row1.age - row2.age
          if (comparison === 0) {
            comparison = row1.name.toLowerCase().localeCompare(row2.name.toLowerCase())
          }
        }
        // 处理降序逻辑
        return isDescending ? -comparison : comparison
      })

      return items
    })

    return { headers, sortedPeople, sortBy, sortDesc }
  }
}

内容的提问来源于stack exchange，提问作者Dónal