element-ui table 多列表头组合排序

Element UI 的 Table 组件支持多列排序，当你需要对表格数据的多字段进行联合排序时，可以利用其自定义的`sort-method`属性以及`props.sortable`特性。

首先，在 `Table` 元素上设置 `props.sortable` 属性，表示哪些列是可以排序的，例如：

<el-table
  :data="tableData"
  :columns="tableColumns"
  prop-key="index"
  @sort-change="handleSortChange"
>
</el-table>

然后，在你的 JavaScript 中定义 `handleSortChange` 函数，它接收当前选中的列名（`column`）和排序方式（`order`），你可以根据这个函数来动态改变数组的排序规则：

methods: {
  handleSortChange(column, order) {
    let sortedData = this.tableData.slice(); // 深拷贝以免原数据被修改

    if (Array.isArray(this.compositeSort)) {
      this.compositeSort.push({ column, order });
    } else {
      this.compositeSort = [{ column, order }];
    }

    this.compositeSort.forEach(item => {
      sortedData.sort((a, b) => {
        const valueA = a[item.column];
        const valueB = b[item.column];

        if (typeof valueA === 'string' || typeof valueB === 'string') {
          return item.order * String(valueA).localeCompare(String(valueB));
        } else {
          return item.order * (valueA - valueB);
        }
      });
    });

    this.tableData = sortedData;
  },
}

这里假设你有一个名为`compositeSort`的数组用于存储排序规则。每次触发排序事件时，会将新的排序信息添加到数组中。当所有排序都完成后，一次性应用所有排序规则。