vue的el-table表格的列排序,点击a列的降序,a列降序会高亮显示,再点击b列的降序,b列的降序会高亮显示,但是a列的降序图标的高亮显示就被移除了,怎么样让a和b列两个排序图标都同时进行高亮显示

你可以通过在 `el-table-column` 中设置 `header-align` 属性来实现这个功能。具体方法如下：

1. 给每个 `el-table-column` 设置 `header-align` 属性为 `center`。

<el-table :data="tableData" style="width: 100%">
  <el-table-column prop="name" label="姓名" header-align="center"></el-table-column>
  <el-table-column prop="age" label="年龄" header-align="center"></el-table-column>
  <el-table-column prop="address" label="地址" header-align="center"></el-table-column>
</el-table>

2. 在排序时，将当前列的排序状态保存到一个变量中，然后在每个 `el-table-column` 的 `sortable` 属性中绑定一个计算属性，用于判断当前列是否需要高亮显示排序图标。如果当前列是被排序的列，就返回 `true`，否则返回 `false`。

<el-table :data="tableData" style="width: 100%">
  <el-table-column prop="name" label="姓名" header-align="center" :sortable="isSorted('name')">
    <template v-slot:header>
      <div v-tooltip="'点击排序'">
        <span>姓名</span>
        <i class="el-icon-arrow-down" :class="{'is-active': sortKey === 'name' && sortOrder === 'desc'}"></i>
        <i class="el-icon-arrow-up" :class="{'is-active': sortKey === 'name' && sortOrder === 'asc'}"></i>
      </div>
    </template>
  </el-table-column>
  <el-table-column prop="age" label="年龄" header-align="center" :sortable="isSorted('age')">
    <template v-slot:header>
      <div v-tooltip="'点击排序'">
        <span>年龄</span>
        <i class="el-icon-arrow-down" :class="{'is-active': sortKey === 'age' && sortOrder === 'desc'}"></i>
        <i class="el-icon-arrow-up" :class="{'is-active': sortKey === 'age' && sortOrder === 'asc'}"></i>
      </div>
    </template>
  </el-table-column>
  <el-table-column prop="address" label="地址" header-align="center" :sortable="isSorted('address')">
    <template v-slot:header>
      <div v-tooltip="'点击排序'">
        <span>地址</span>
        <i class="el-icon-arrow-down" :class="{'is-active': sortKey === 'address' && sortOrder === 'desc'}"></i>
        <i class="el-icon-arrow-up" :class="{'is-active': sortKey === 'address' && sortOrder === 'asc'}"></i>
      </div>
    </template>
  </el-table-column>
</el-table>

3. 在组件的 `data` 属性中定义一个 `sortKey` 变量和一个 `sortOrder` 变量，用于保存当前排序的列和排序方式。

data() {
  return {
    tableData: [
      { name: '张三', age: 18, address: '北京市朝阳区' },
      { name: '李四', age: 20, address: '上海市浦东新区' },
      { name: '王五', age: 22, address: '广州市天河区' },
      { name: '赵六', age: 24, address: '深圳市福田区' }
    ],
    sortKey: '',
    sortOrder: ''
  }
},

4. 在组件的 `methods` 属性中定义一个 `sort` 方法，用于处理排序逻辑。在方法中，首先根据当前列和排序方式对表格数据进行排序，然后将排序的列和方式保存到 `sortKey` 和 `sortOrder` 变量中。

methods: {
  sort(key) {
    if (this.sortKey === key) {
      this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc'
    } else {
      this.sortKey = key
      this.sortOrder = 'asc'
    }
    this.tableData.sort((a, b) => {
      const sortVal = a[key] > b[key] ? 1 : -1
      return this.sortOrder === 'asc' ? sortVal : -sortVal
    })
  },
  isSorted(key) {
    return () => this.sortKey === key
  }
}

5. 在模板中，将排序图标的 `i` 标签的 `class` 属性绑定为一个对象，对象的键为 `is-active`，值为一个计算属性，用于判断当前列是否需要高亮显示排序图标。

<i class="el-icon-arrow-down" :class="{'is-active': sortKey === 'name' && sortOrder === 'desc'}"></i>
<i class="el-icon-arrow-up" :class="{'is-active': sortKey === 'name' && sortOrder === 'asc'}"></i>

这样，当你点击某一列排序时，该列排序图标和之前的排序图标都会高亮显示。