我想要vue的el-table表格的列多重排序的情况下对多个排序图标进行高亮显示

在 Vue 的 el-table 中，可以通过 `sort-change` 事件来监听表格的排序变化。当多列同时排序时，可以为每个排序条件设置一个唯一的 `sort-by` 属性，将这些属性保存在一个数组中。然后，通过计算属性来判断每个排序条件是否处于激活状态，并根据它们的顺序和方向来确定每个排序图标的样式。

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

<el-table :data="tableData" :sort-by="sortBy" :sort-order="sortOrder" @sort-change="handleSortChange">
  <el-table-column prop="name" label="Name"></el-table-column>
  <el-table-column prop="age" label="Age"></el-table-column>
  <el-table-column prop="score" label="Score"></el-table-column>
</el-table>

data() {
  return {
    tableData: [
      { name: 'John', age: 18, score: 90 },
      { name: 'Mary', age: 20, score: 85 },
      { name: 'Bob', age: 22, score: 95 },
      { name: 'Jane', age: 19, score: 80 },
    ],
    sortBy: ['score', 'age'], // 排序条件数组
    sortOrder: ['desc', 'asc'], // 排序方向数组
  }
},
computed: {
  sortIcons() { // 计算属性：判断排序图标样式
    const icons = []
    for (let i = 0; i < this.sortBy.length; i++) {
      if (this.sortBy[i] === this.$refs.table.store.states.sortProp) {
        icons.push(this.sortOrder[i] === 'asc' ? 'el-icon-arrow-up' : 'el-icon-arrow-down')
      } else {
        icons.push('el-icon-sort')
      }
    }
    return icons
  },
},
methods: {
  handleSortChange({ prop, order }) { // 排序变化事件处理函数
    const index = this.sortBy.indexOf(prop)
    if (index >= 0) { // 该列已排序
      this.sortOrder.splice(index, 1, order)
    } else { // 新增排序条件
      this.sortBy.push(prop)
      this.sortOrder.push(order)
    }
  },
},

在模板中，我们使用了 el-table 的 `:sort-by` 和 `:sort-order` 属性来指定排序条件和排序方向。在计算属性 `sortIcons` 中，我们根据当前表格的排序状态来判断每个排序图标的样式。具体来说，如果该列是当前的排序条件，则根据它的方向设置向上或向下箭头图标；否则，显示普通的排序图标。

在排序变化事件处理函数 `handleSortChange` 中，我们根据传递的参数 `prop` 和 `order` 来更新排序条件数组 `sortBy` 和排序方向数组 `sortOrder`。如果该列已经排序，则更新它的方向；否则，将该列添加为新的排序条件。

最后，我们需要在 el-table 中添加一个 `ref` 属性，以便在计算属性和事件处理函数中引用它：

<el-table ref="table" :data="tableData" :sort-by="sortBy" :sort-order="sortOrder" @sort-change="handleSortChange">
  <!-- ... -->
</el-table>

这样，当多列同时排序时，就可以根据它们的顺序和方向来高亮显示每个排序图标了。