elementui 多列排序 使用效果上不是很好但需要记录下 多列排序的 有效方法
<el-table
:header-cell-class-name="handleHeaderClass"
@header-click="sortChangePushDate"
@sort-change="handleTableSort" >
<script >
method:{
handleTableSort (column) {
// 有些列不需要排序,提前返回
if (column.sortable !== 'custom') {
return
}
if (!column.multiOrder) {
column.multiOrder = 'descending'
} else if (column.multiOrder === 'descending') {
column.multiOrder = 'ascending'
} else {
column.multiOrder = ''
}
this.handleOrderChange(column.property, column.multiOrder)
},
handleOrderChange(orderColumn, orderState) {
let result = this.ordersList.find(e => e.orderColumn === orderColumn)
if (result) {
result.orderState = orderState
} else {
this.ordersList.push({
orderColumn: orderColumn,
orderState: orderState
})
}
// 调接口查询,在传参的时候把ordersList进行处理成后端想要的格式
console.warn("this.ordersList : 排序列", this.ordersList)
this.loadUmengCountListDate()
},
// 设置列的排序为我们自定义的排序
handleHeaderClass({column}) {
column.order = column.multiOrder
},
}
</script>
以上方法 适用于多列查询 ,一般情况下 多列查询条件不是很完善。使用条件 则不适用