element-ui el-table 多列排序

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

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

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

最终实现效果：

![20210525141205431.png][]

**思路**:

*  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)
    }

[20210525141205431.png]: /images/20221014/3527ebe78c1141fd858197b1fc8eeea8.png