v-data-table从模板v-slot获取数据时无法排序

如果您使用的是v-slot来填充v-data-table中的数据，则该数据是由模板提供的，这可能导致v-data-table无法自动排序。为解决此问题，您需要手动设置v-data-table的排序函数。

以下是一个示例，展示了如何从模板v-slot中获取数据并手动设置排序逻辑：

<template>
  <v-data-table
    :headers="headers"
    :items="items"
    :sort-desc="[sortDesc]"
    :sort-by="[sortBy]"
    @click:header="sortTable"
  >
    <template v-slot:items>
      <tr v-for="item in sortedItems">
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
      </tr>
    </template>
  </v-data-table>
</template>

<script>
  export default {
    data: () => ({
      headers: [
        { text: "Name", value: "name" },
        { text: "Age", value: "age" },
      ],
      items: [
        { name: "Tom", age: 28 },
        { name: "Jerry", age: 32 },
        { name: "John", age: 25 },
      ],
      sortDesc: false,
      sortBy: "name",
    }),
    computed: {
      sortedItems() {
        return this.items.sort((a, b) => {
          const sortA = a[this.sortBy];
          const sortB = b[this.sortBy];

          if (typeof sortA === "string") {
            return sortA.localeCompare(sortB) * (this.sortDesc ? -1 : 1);
          } else {
            return (sortA - sortB) * (this.sortDesc ? -1 : 1);
          }
        });
      },
    },
    methods: {
      sortTable(header) {
        if (header.value === this.sortBy) {
          this.sortDesc = !this.sortDesc;
        } else {
          this.sortDesc = false;
          this.sortBy = header.value;
        }
      },
    },
  };
</script>

在上述示例中，我们手动设置了一个名