表格排序sortable

在 Vue Element UI 的表格中，如果你想要对等级（或其他非数字字段）进行排序，并且这些等级是以字符串形式存储的（如 “A”, “B”, “C” 等），那么默认的排序可能不会按照你期望的等级顺序来执行。

Element UI 的表格组件 el-table 的 sortable 属性默认只能对数字或日期等可以直接比较的值进行排序。对于自定义在这里插入代码片的等级排序，你需要手动处理排序逻辑。

这里有两种方法可以实现等级排序：

方法一：使用 sort-method 属性
你可以为 el-table-column 添加一个 sort-method 属性，这个属性接收一个函数，用于定义你的排序逻辑。

<template>  
  <el-table  
    :data="tableData"  
  >  
    <!-- 其他列 -->  
    <el-table-column  
      prop="level"  
      label="等级"  
      sortable  
      :sort-method="sortLevel"  
    >  
    </el-table-column>  
  </el-table>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      tableData: [  
        // 示例数据  
        { level: 'A' },  
        { level: 'B' },  
        { level: 'C' },  
        // ...  
      ],  
      sortOrders: {  
        // 定义等级顺序，从高到低  
        'desc': ['A', 'B', 'C', /* ... */],  
        // 定义等级顺序，从低到高（如果需要的话）  
        'asc': ['C', 'B', 'A', /* ... */],  
      },  
    };  
  },  
  methods: {  
    sortLevel(a, b) {  
      const order = this.sortOrders[this.sortOrder]; // 假设你有一个 data 属性或计算属性来跟踪排序顺序  
      const indexA = order.indexOf(a.level);  
      const indexB = order.indexOf(b.level);  
      return indexA - indexB; // 返回负数表示 a 应该排在 b 前面，正数表示 a 应该排在 b 后面  
    },  
  },  
  // ... 其他选项  
};  
</script>

注意：在这个例子中，我假设你有一个 sortOrder 数据属性或计算属性来跟踪当前的排序方向（升序或降序）。你需要根据你的应用状态来设置这个值。

方法二：服务器端排序
如果你的数据是从服务器获取的，并且服务器支持排序，你可以将排序逻辑放在服务器端。当用户点击列标题进行排序时，你可以向服务器发送一个包含排序字段和排序方向的请求，然后服务器会返回排序后的数据。

这种情况下，你仍然需要监听 sort-change 事件，但处理逻辑会是将请求发送到服务器并更新表格数据，而不是在客户端进行排序。