Element表格eltable多列排序，后端接口排序

ElementUI 2.x版本的 table 组件目前是不支持多列排序的，此方法适用于框架下的table组件多列数据排序，将排序方式以数组形式传递给后端排序。
效果如下：

 

image.png

1.Table组件多列排序

//  el-table标签中增加handleSortChange和handleHeaderCellClass方法
//  el-table-column标签中增加sortable='custom'
<el-table
    @sort-change="handleSortChange"
    :header-cell-class-name="handleHeaderCellClass">
      <el-table-column
          prop="XXX"
          :label="XXX"
          sortable='custom'>
      </el-table-column>
      <el-table-column
          prop="XXX"
          :label="XXX"
          sortable='custom'>
      </el-table-column>
      <el-table-column
          prop="XXX"
          :label="XXX"
          sortable='custom'>
      </el-table-column>
</el-table>

2.定义Data数组存放筛选数据

//  data中定义Arr数组，用来存放筛选列
data(){
    return {
        orderArray: [],
    }
}

3.排序方法

            //排序方法
            handleHeaderCellClass({row, column, rowIndex, columnIndex}){
                this.orderArray.forEach(element => {
                    if (column.property===element.prop) {
                        column.order=element.order
                    }
                });
            },
            handleSortChange( {column, prop, order} ){    //order值（ascending、descending、null）对应不同的排序方式
                if (order) {  //参与排序
                    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{  //不参与排序
                    let orderIndex=0
                    this.orderArray.forEach((element,index) => {
                        if (element.prop === prop) {
                            orderIndex=index
                        }
                    });
                    this.orderArray.splice(orderIndex,1)
                }
                console.log(this.orderArray,"this.orderArray000")
            },

 

转自：https://www.jianshu.com/p/ac32b9c1fba0