vue table 排序

Vue Table 可以使用 sort-by 属性来进行排序。sort-by 属性可以指定一个字段或一个方法来进行排序，同时可以使用 sort-desc 属性来指定排序的方向。

以下是一个 Vue Table 排序的例子：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th @click="sortBy('name')">Name</th>
          <th @click="sortBy('age')">Age</th>
          <th @click="sortBy('email')">Email</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in sortedUsers" :key="user.id">
          <td>{{ user.name }}</td>
          <td>{{ user.age }}</td>
          <td>{{ user.email }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [
        { id: 1, name: 'John', age: 25, email: 'john@example.com' },
        { id: 2, name: 'Jane', age: 30, email: 'jane@example.com' },
        { id: 3, name: 'Bob', age: 20, email: 'bob@example.com' },
        { id: 4, name: 'Alice', age: 35, email: 'alice@example.com' },
      ],
      sortByField: 'name',
      sortDesc: false,
    };
  },
  computed: {
    sortedUsers() {
      const field = this.sortByField;
      const desc = this.sortDesc ? -1 : 1;
      return this.users.sort((a, b) => {
        if (a[field] < b[field]) return -1 * desc;
        if (a[field] > b[field]) return 1 * desc;
        return 0;
      });
    },
  },
  methods: {
    sortBy(field) {
      if (field === this.sortByField) {
        this.sortDesc = !this.sortDesc;
      } else {
        this.sortByField = field;
        this.sortDesc = false;
      }
    },
  },
};
</script>

在上面的例子中，我们定义了一个 users 数组来存储用户信息。Vue Table 使用 v-for 指令来循环渲染用户信息，并使用 @click 事件来触发 sortBy 方法进行排序。sortBy 方法根据点击的字段来进行排序，并更新 sortByField 和 sortDesc 属性。sortedUsers 计算属性根据 sortByField 和 sortDesc 属性来返回排序后的用户信息。

注意，在实际开发中，我们可能需要使用分页、搜索等功能，这时需要引入第三方库或自己编写相关功能。