element-ui el-table 多列排序-蒲公英云

element-ui el-table 多列排序

Dear 丶 2022-10-15 12:59 161阅读 0赞

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]"
>

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)