el-table 全量排序

`el-table` 是 Element UI 组件库中的一个表格组件，用于展示数据集合。在 `el-table` 中实现全量排序通常指的是对表格的列进行排序，这种排序是针对表格中所有数据的，并且通常是可交互的，即用户可以通过点击列头来改变数据的排序顺序。

在 Vue.js 中使用 `el-table` 实现全量排序的步骤如下：

1. 在 `el-table` 组件上绑定一个数据模型，这个数据模型包含了所有需要展示的数据。

2. 为每个需要进行排序的列设置一个 `prop` 属性，该属性的值对应于数据模型中的字段名。

3. 使用 `el-table` 提供的 `default-sort` 属性来指定默认的排序字段和排序顺序。

4. 通过监听 `el-table` 的 `sort-change` 事件来获取当前排序的字段和顺序，并更新数据模型，以达到全量排序的效果。

以下是一个简单的示例代码：

<template>
  <el-table :data="tableData" @sort-change="handleSortChange">
    <el-table-column prop="date" label="日期" width="180" />
    <el-table-column prop="name" label="姓名" width="180" />
    <el-table-column prop="address" label="地址" />
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        // ...更多数据
      ],
      defaultSort: {
        prop: 'date',
        order: 'descending'
      }
    };
  },
  methods: {
    handleSortChange({ column, prop, order }) {
      // 根据列名进行全量排序
      this.tableData.sort((a, b) => {
        let valueA = a[prop];
        let valueB = b[prop];

        if (order === 'ascending') {
          return valueA > valueB ? 1 : -1;
        } else {
          return valueA < valueB ? 1 : -1;
        }
      });
    }
  },
  mounted() {
    // 设置默认排序
    this.handleSortChange({
      column: null,
      prop: this.defaultSort.prop,
      order: this.defaultSort.order
    });
  }
};
</script>