element-ui el-table 多列排序
需求:el-table 需要支持多列排序,后端排序。即就是在点击后重新发送请求,点击一列的排序,另一列的排序样式能够保留
问题: element table 排序默认是单列排序
最终实现效果:
思路:
- header-click 事件 结合 header-cell-class-name
在点击表头的时候排序的列以及是升降序保存到一个数组对象里, 然后通过header-cell-class-name属性设置选中的样式
<el-table
:data="tableData.list"
border
size="mini"
stripe
:fit="false"
:header-cell-class-name="handleHeaderClass"
@header-click="handleHeaderCLick"
@sort-change="handleTableSort"
>
<el-table-column
v-for="(items, i) in dropCol"
:key="`${tableColList[i].label}${dropCol[i].label}`"
:prop="dropCol[i].label"
:sortable="items.labelSupportSort === 1 ? 'custom' : false"
:column-key="i.toString()"
:sort-orders="['descending', 'ascending', null]"
>
<el-table-column>
</el-table>
data: {
return {
ordersList: [],
}
}
// 设置列的排序为我们自定义的排序
handleHeaderClass({ column }) {
column.order = column.multiOrder
}
// 点击表头
handleHeaderCLick(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进行处理成后端想要的格式
this.getDataList()
}
// 上面缺点是只能通过点击表头切换排序状态,点击小三角排序不会触发,处理sort-change事件和点击表头一样
// 列表排序
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)
}