Vuetify 3 Data Table无@current-items事件，如何获取排序后列表？

Vuetify 3确实移除了@current-items事件，但可以通过以下几种方式获取排序后的列表：

• 使用计算属性结合排序状态
  绑定v-model:sort-by和v-model:sort-desc跟踪当前排序字段与方向，再通过计算属性对原始数据做排序处理：

  <template>
    <v-data-table
      :items="rawItems"
      :headers="headers"
      v-model:sort-by="sortBy"
      v-model:sort-desc="sortDesc"
    ></v-data-table>
  </template>
  
  <script setup>
  import { ref, computed } from 'vue'
  
  const rawItems = ref([/* 你的原始数据集合 */])
  const headers = ref([/* 表头配置数组 */])
  const sortBy = ref('')
  const sortDesc = ref(false)
  
  const sortedItems = computed(() => {
    if (!sortBy.value) return [...rawItems.value]
    return [...rawItems.value].sort((a, b) => {
      const valA = a[sortBy.value]
      const valB = b[sortBy.value]
      if (typeof valA === 'string') {
        return sortDesc.value ? valB.localeCompare(valA) : valA.localeCompare(valB)
      }
      return sortDesc.value ? valB - valA : valA - valB
    })
  })
  </script>
  

  此时sortedItems就是实时更新的排序后列表，可直接用于后续业务逻辑。

• 通过组件实例获取内部处理后的列表
  给v-data-table添加模板引用，在排序状态变更时，通过实例的内部属性filteredItems获取排序后的结果：

  <template>
    <v-data-table
      ref="dataTableRef"
      :items="rawItems"
      :headers="headers"
      @update:sort-by="onSortChange"
      @update:sort-desc="onSortChange"
    ></v-data-table>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  
  const rawItems = ref([/* 你的原始数据集合 */])
  const headers = ref([/* 表头配置数组 */])
  const dataTableRef = ref(null)
  
  const onSortChange = () => {
    const sortedList = dataTableRef.value?.filteredItems
    if (sortedList) {
      // 在这里处理排序后的列表
      console.log(sortedList)
    }
  }
  </script>
  

  注意：filteredItems是组件内部属性，后续版本可能存在变动，使用前需测试兼容性。

• 自定义表头点击逻辑
  覆盖表头插槽，添加自定义点击事件手动控制排序状态，同步更新排序后的列表：

  <template>
    <v-data-table
      :items="sortedItems"
      :headers="headers"
    >
      <template v-slot:header="{ header }">
        <th @click="toggleSort(header)">
          {{ header.text }}
          <v-icon v-if="sortBy === header.value">
            {{ sortDesc ? 'mdi-arrow-down' : 'mdi-arrow-up' }}
          </v-icon>
        </th>
      </template>
    </v-data-table>
  </template>
  
  <script setup>
  import { ref, computed } from 'vue'
  
  const rawItems = ref([/* 你的原始数据集合 */])
  const headers = ref([/* 表头配置数组 */])
  const sortBy = ref('')
  const sortDesc = ref(false)
  
  const toggleSort = (header) => {
    if (sortBy.value === header.value) {
      sortDesc.value = !sortDesc.value
    } else {
      sortBy.value = header.value
      sortDesc.value = false
    }
  }
  
  const sortedItems = computed(() => {
    if (!sortBy.value) return [...rawItems.value]
    return [...rawItems.value].sort((a, b) => {
      const valA = a[sortBy.value]
      const valB = b[sortBy.value]
      if (typeof valA === 'string') {
        return sortDesc.value ? valB.localeCompare(valA) : valA.localeCompare(valB)
      }
      return sortDesc.value ? valB - valA : valA - valB
    })
  })
  </script>
  

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