Vue.js 数据排序 - 使用 sort 字段对数据进行排序

如何使用vue通过sort字段排序上面的内容内容：可以使用Vue的computed属性结合Array的sort方法对数据进行排序，具体实现如下：

<template>
  <div>
    <ul>
      <li v-for="item in sortedItems" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 2, typeId: 1, name: '工程类', level: 0, parentId: 0, sort: 1, createTime: 1680831831000 },
        { id: 5, typeId: 1, name: 'fuw', level: 0, parentId: 0, sort: 1, createTime: 1680832228000 },
        { id: 6, typeId: 1, name: '2222', level: 0, parentId: 0, sort: 1, createTime: 1680832271000 },
        { id: 7, typeId: null, name: '9999', level: 0, parentId: 0, sort: 1, createTime: 1680832287000 },
        { id: 9, typeId: null, name: 'test', level: 0, parentId: 0, sort: 5, createTime: 1680833677000 },
        { id: 10, typeId: null, name: '嘿哈', level: 0, parentId: 0, sort: 5, createTime: 1680834009000 },
      ],
    };
  },
  computed: {
    sortedItems() {
      return this.items.sort((a, b) => a.sort - b.sort);
    },
  },
};
</script>

在computed属性中定义一个sortedItems属性，该属性返回通过Array的sort方法进行排序后的数据。sort方法接受一个比较函数作为参数，该函数返回一个负数、零或正数，表示两个元素的大小关系。在这里，我们通过比较sort字段的值来进行排序。最终在模板中遍历sortedItems属性，渲染出排序后的数据。