vue的el-table表格的列排序,点击a列的降序,a列降序会高亮显示,再点击b列的降序,b列的降序会高亮显示,但是a列的降序图标的高亮显示就被移除了,怎么样保留点击

可以通过自定义表头来实现保留排序列的高亮显示。

首先，在表头中添加一个额外的样式类，用于控制当前排序列的高亮显示：

<el-table-column
  prop="a"
  label="A"
  sortable
  :class="{'sorted': sortProp === 'a' && sortOrder === 'descending'}">
</el-table-column>
<el-table-column
  prop="b"
  label="B"
  sortable
  :class="{'sorted': sortProp === 'b' && sortOrder === 'descending'}">
</el-table-column>

其中，`:class="{'sorted': sortProp === 'a' && sortOrder === 'descending'}"` 表示如果当前排序列是 `a` 列并且排序方式是降序，就添加 `sorted` 样式类。同理，`:class="{'sorted': sortProp === 'b' && sortOrder === 'descending'}"` 表示如果当前排序列是 `b` 列并且排序方式是降序，就添加 `sorted` 样式类。

接着，在表头中添加点击事件，用于处理列排序，并更新当前排序列的状态：

<el-table-column
  prop="a"
  label="A"
  sortable
  :class="{'sorted': sortProp === 'a' && sortOrder === 'descending'}"
  @sort-change="handleSortChange('a')">
</el-table-column>
<el-table-column
  prop="b"
  label="B"
  sortable
  :class="{'sorted': sortProp === 'b' && sortOrder === 'descending'}"
  @sort-change="handleSortChange('b')">
</el-table-column>

其中，`@sort-change="handleSortChange('a')" ` 表示如果点击了 `A` 列，就调用 `handleSortChange('a')` 方法进行排序，并更新当前排序列为 `a`。

最后，在组件中定义 `sortProp` 和 `sortOrder` 变量，并实现 `handleSortChange` 方法：

export default {
  data() {
    return {
      sortProp: null,
      sortOrder: null,
      tableData: [...]
    };
  },
  methods: {
    handleSortChange(prop) {
      if (this.sortProp === prop) {
        this.sortOrder = this.sortOrder === 'descending' ? 'ascending' : 'descending';
      } else {
        this.sortProp = prop;
        this.sortOrder = 'descending';
      }
    }
  }
}

其中，当点击的列和当前排序列相同时，就切换排序方式；否则，就将当前排序列更新为点击的列，并将排序方式设置为降序。这样就可以实现保留点击的列的排序高亮显示了。