vue table 自定义排序

Vue Table（也称为Element UI中的表格组件）允许开发者自定义排序功能，使得用户可以根据需要对数据进行升序或降序排列。以下是自定义排序的基本步骤：

1. 定义数据结构：在Vue组件的数据中，通常包含一个数组，其中每个元素都有一个`key`属性用于排序依据。

data() {
  return {
    columns: [
      { prop: 'name', label: '姓名', sortable: true },
      { prop: 'age', label: '年龄', sortable: true },
      // 更多列...
    ],
    dataSource: [
      { name: '张三', age: 25 },
      { name: '李四', age: 30 },
      // 数据列表...
    ]
  }
}

2. 添加排序方法：创建一个名为`sortTable`的方法，接收两个参数，通常是当前列的`prop`和`direction`（升序或降序）。根据这两个参数，我们可以遍历`dataSource`并更新其顺序。

methods: {
  sortTable(column) {
    this.dataSource.sort((a, b) => a[column.prop] - b[column.prop]); // 升序
    // 如果需要降序，可以修改为 a[column.prop] - b[column.prop] * -1;
  }
}

3. 绑定事件：给表格的表头单元格添加点击事件，当用户点击时触发`sortTable`方法，并传入对应列的信息。

<el-table-column
  v-for="column in columns"
  :key="column.prop"
  :prop="column.prop"
  :label="column.label"
  @click="sortTable(column)"
>
</el-table-column>

4. 初始排序：如果你想要默认按照某一列排序，可以在`data`中设置初始排序方向，然后在`created`生命周期钩子中调用一次排序方法。

created() {
  this.sortTable({ prop: 'name', direction: 'asc' });
}