element-ui table 多列排序的样式问题

Question

问题描述element table排序默认是单列排序,样式也是相应的点一列后之前那一列的样式会被取消,我现在的需求就是多列排序(功能实现为后台排序,前台只需在点击后重新发请求即可),点击一列的排序,另一列的排序的样式能够保留(观察发现是classname为ascending和descending控制显示)问题出现的环境背景table 表格实现点击多列,每列之前的排序样式不会互相影响

Answer 1

结合 sort-change 事件 以及 header-cell-class-name 方法 
<el-table @sort-change="handleSortChange" :header-cell-class-name="handleTheadAddClass" class="table">
    //...
</el-table>data: {     return {
         curThead: ''
     }
}
   
handleTheadAddClass({row, column, rowIndex, columnIndex}){
    // 判断找到当前列 添加样式    if( column.prop == this.curThead ){       return 'active-thead'
    }
},
handleSortChange({ column, prop, order }){
    console.log( column, prop, order )
    //拿到当前列的某个属性
    this.curThead = prop
}

Answer 2

<style scoped>
    .table >>> .active-thead .sort-caret.descending{        border-top-color: #409eff;
    }    .table >>> .active-thead .sort-caret.ascending{        border-top-color: #409eff;
    }</style>