摘要：
ElementUI2的表组件。x目前不支持多列排序。该方法适用于框架下表组件的多列数据排序。排序方法以数组的形式传递给后端排序。
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")
},