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
}

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

Answer 2

根据前面的回答，改了下方法，就可以实现多列排序功能了

<el-table @sort-change="handleSortChange" :header-cell-style="handleTheadStyle" class="table">
    //...
</el-table>

data: {
     return {
         curThead: []
     }
}
   
handleTheadStyle({row, column, rowIndex, columnIndex}){
    // 找出当前节点的是否在curThead有所记录
    let index = this.curThead.findIndex(item => { return item.prop == column.property; })
    if(index>-1){
    // 在curThead找到当前节点的property值，对其order进行赋值。
    // 值得注意的是，column中property字段保存的是当前节点的prop值。
        column.order = this.curThead[index].order;
    }

},
handleSortChange({ column, prop, order }){
    // 判断数组curThead中是否存在当前节点的prop
    let index = this.curThead.findIndex(item => { return item.prop == prop; })
    if (index>-1) {
    // 如果存在，修改数组curThead中的order
        this.curThead[index].order = order;
    }
    else {
    // 如果不存在，向数组curThead中添加当前节点的prop和order
        this.curThead.push({prop:prop,order:order});
    }
}

Answer 3

亲测可用， 缺点之一是只能通过点击表头切换排序状态
1.

2.

3.

4.

5.

6.

Answer 4

我怎么不好使？

Answer 5

ElementUI 2.x 版本的 table 组件目前是不支持多列排序的，作者计划 3.0 版本上这个功能。

参考：https://github.com/ElemeFE/element/issues/14398

Answer 6

@sort-change搭配 :header-cell-class-name是可以的，代码如下：
<el-table

:data="tableData"
style="width: 100%"
@sort-change="handleSortChange"
:header-cell-class-name="handleHeaderCellClass"
>

handleHeaderCellClass({row, column, rowIndex, columnIndex}){

    console.log('row',row ,'column',column);
     this.orderArray.forEach(element => {
        if (column.property===element.prop) {
          column.order=element.order
        }
      });
  },
  handleSortChange( {column, prop, order} ){
    console.log('column',column, 'prop',prop, 'order',order);
    //取消order是null
    if (order) {
      //order为ascending、descending 时
      // 1、该字段原本就在orderArray,2、该字段原本不在orderArray
      let flagIsHave=false
      this.orderArray.forEach(element => {
        if (element.prop === prop) {
          element.order=order
          flagIsHave=true
        }
      });
      if (!flagIsHave) {
        this.orderArray.push({
          prop:prop,
          order:order
        })
      }
    }else{
      //order为null时，该字段原本一定在orderArray，去掉即可
      let orderIndex=0
       this.orderArray.forEach((element,index) => {
        if (element.prop === prop) {
          orderIndex=index
        }
      });
        this.orderArray.splice(orderIndex,1)
    }
  },