element-ui el-table 多列排序

element-ui el-table 多列排序

需求：el-table 需要支持多列排序，后端排序。即就是在点击后重新发送请求，点击一列的排序，另一列的排序样式能够保留

问题: element table 排序默认是单列排序

最终实现效果：

思路:

• header-click 事件 结合 header-cell-class-name
  在点击表头的时候排序的列以及是升降序保存到一个数组对象里, 然后通过header-cell-class-name属性设置选中的样式

    :data="tableData.list"
    border
    size="mini"
    stripe
    :fit="false"
    :header-cell-class-name="handleHeaderClass"
    @header-click="handleHeaderCLick"
    @sort-change="handleTableSort"
>
    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)
}