vue中列表页按照排序字段排序

在 Vue 中，你可以使用 `Array.prototype.sort()` 方法对数组进行排序。假设你有一个包含多个对象的数组 `items`，每个对象都有一个 `sortOrder` 属性表示排序顺序。你可以按照以下步骤进行排序：

1. 在组件的 `data` 中定义一个 `sortKey` 属性表示当前排序的关键字。
2. 定义一个 `sortItems` 计算属性，根据 `sortKey` 对 `items` 数组进行排序。
3. 在页面中渲染排序的表头，并绑定点击事件来更新 `sortKey`。

下面是一个示例代码：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th @click="sortKey = 'name'">Name</th>
          <th @click="sortKey = 'age'">Age</th>
          <th @click="sortKey = 'sortOrder'">Sort Order</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in sortItems" :key="item.id">
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.sortOrder }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'John', age: 25, sortOrder: 2 },
        { id: 2, name: 'Mary', age: 30, sortOrder: 1 },
        { id: 3, name: 'Bob', age: 20, sortOrder: 3 }
      ],
      sortKey: 'name'
    };
  },
  computed: {
    sortItems() {
      const key = this.sortKey;
      return this.items.sort((a, b) => {
        return a[key] > b[key] ? 1 : a[key] < b[key] ? -1 : 0;
      });
    }
  }
};
</script>

在这个示例中，我们在表头中绑定了三个点击事件来更新 `sortKey`，然后使用 `sortItems` 计算属性对数组进行排序并渲染到页面中。注意，我们使用了比较运算符 `>` 和 `<` 来比较两个对象的排序属性，这里假设这些属性都是基本数据类型（如字符串或数字）。如果你需要比较复杂的数据类型，可以使用更高级的排序算法或自定义比较函数。