elementui 组合排序，并且显示排序先后样式

Element UI 的表格组件（`el-table`）提供了一种方便的方式来组合排序。通过设置 `sort-method` 属性，你可以自定义排序逻辑，例如对数组进行复杂排序。当用户点击表头时，可以使用提供的 `props.sort` 和 `props.order` 来改变排序状态。

为了显示排序的先后样式，你可以使用 `row-class-name` 或者直接操作 `el-row` 的 `classes` 属性。当列被升序或降序排列时，Element UI 默认会添加 `is-desc` 或 `is-asc` 类别到行上，你可以根据不同类别的存在来调整CSS样式，比如：

<template>
  <el-table :data="tableData" :sort-method="customSortMethod">
    <el-table-column prop="name" label="姓名" sortable @sort-change="handleSortChange"></el-table-column>
    <!-- 添加其他列... -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [], // 数据源
      sortColumn: null, // 当前排序的列
      sortOrder: '', // 排序顺序，'asc' 或 'desc'
    };
  },
  methods: {
    customSortMethod(column, order) {
      this.tableData.sort((a, b) => {
        // 自定义排序逻辑...
        if (column.prop === 'age') {
          return order === 'asc' ? a.age - b.age : b.age - a.age;
        } else {
          // 其他属性的排序逻辑...
        }
      });
      this.sortColumn = column;
      this.sortOrder = order;
      // 更新行样式
      this.$set(this.tableData[0], 'rowClass', order === 'asc' ? 'asc-class' : 'desc-class');
    },
    handleSortChange(column, order) {
      this.customSortMethod(column, order);
    },
  },
};
</script>

<style scoped>
.asc-class {
  /* 升序时的样式 */
}
.desc-class {
  /* 降序时的样式 */
}
</style>

在这个例子中，你需要根据你的需求去编写自定义的 `customSortMethod` 函数，以及定义 `.asc-class` 和 `.desc-class` 类的样式来表示排序的先后。