element-ui el-table 多列排序

11/2/2020 Vue

# 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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.orders.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)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
上次更新: 3/22/2021, 3:28:01 PM