el-table动态列排序

### 实现 Element UI `el-table` 动态列排序

为了实现在 `Element UI` 的 `el-table` 组件中动态列的排序功能，可以按照如下方法操作：

对于需要支持排序的列，在定义 `<el-table-column>` 时设置属性 `sortable='custom'`[^1]。这表明该列允许自定义排序逻辑。

除了标记可排序外，还需监听表格上的 `sort-change` 事件来处理具体的排序行为。此事件会在用户点击表头排序图标时触发，并传递当前排序状态给回调函数。通过这个回调函数可以根据用户的交互调整数据源中的顺序并更新视图显示的内容。

下面是一个完整的 Vue.js 方法实现例子，展示了如何结合上述特性完成动态列排序的功能：

<template>
  <div id="app">
    <!-- 定义表格 -->
    <el-table :data="sortedTableData" @sort-change="handleSortChange">
      <!-- 假设有一列为 'recruitEntryNum', 设置其为可排序 -->
      <el-table-column prop="recruitEntryNum" label="人数" width="140" show-overflow-tooltip sortable='custom'></el-table-column>

      <!-- 可以继续添加其他列... -->

    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { recruitEntryNum: 5 },
        { recruitEntryNum: 2 },
        // 更多的数据项...
      ],
      sortConfig: null, // 存储排序配置的对象
    };
  },
  computed: {
    sortedTableData() {
      let result = [...this.tableData];
      
      if (this.sortConfig && this.sortConfig.order) {
        const key = this.sortConfig.prop;
        const order = this.sortConfig.order === "ascending";
        
        result.sort((a, b) => {
          if (!key || !order) return 0;

          if (typeof a[key] !== typeof b[key]) {
            throw new Error(`无法比较不同类型的数据`);
          }

          if (typeof a[key] === "string") {
            return order ? a[key].localeCompare(b[key]) : b[key].localeCompare(a[key]);
          } else if (typeof a[key] === "number") {
            return order ? a[key] - b[key] : b[key] - a[key];
          }
          
          return 0;
        });
      }

      return result;
    }
  },
  methods: {
    handleSortChange({ column, prop, order }) {
      console.log(column, prop, order);
      this.sortConfig = { prop, order }; // 更新排序配置对象
    }
  }
};
</script>

在这个实例中，每当用户改变某一列的排序方式时，都会调用 `handleSortChange` 函数并将新的排序参数保存到组件的状态 (`sortConfig`) 中；接着计算属性 `sortedTableData` 将基于最新的排序条件重新排列原始数据列表 (`tableData`) 并渲染至页面上。