el-table 表头多字段排序
- 实现：借助 el-table 的 sort-change 方法和属性 header-cell-class-name
- 具体实现：
<!-- template -->
<el-table @sort-change="sortChange" :header-cell-class-name="handleHeaderCellClass"></el-table>
<!-- data -->
orderList: [], // 需要显示排序的字段
currentOrderList: [], // 已保存的排序
<!-- methods -->
/**
* @description 表头排序
*/
sortChangeLog(row) {
if (row.order) {
// 参与排序
let flag = false
this.orderList.forEach((element) => {
if (row.prop === element.prop) {
element.order = row.order
flag = true
}
})
if (!flag) {
this.orderList.push({
prop: row.prop,
order: row.order,
})
}
if (row.order === 'ascending') {
// 顺序
this.currentOrderList.push(`${row.prop} asc`)
// 删除相反排序字段
this.currentOrderList = _.filter(this.currentOrderList, (item) => {
return item !== `${row.prop} desc`
})
} else if (row.order === 'descending') {
// 逆序
this.currentOrderList.push(`${row.prop} desc`)
// 删除相反排序字段
this.currentOrderList = _.filter(this.currentOrderList, (item) => {
return item !== `${row.prop} asc`
})
}
}else {
// 不参与排序
this.orderList = this.orderList.filter((element) => {
return element.prop !== row.prop
})
// 删除排序字段
this.currentOrderList = _.filter(this.currentOrderList, (item) => {
return item !== `${row.prop} asc` && item !== `${row.prop} desc`
})
}
}
},
/**
* @description 列表多个字段显示排序箭头
*/
handleHeaderCellClass({ column }) {
this.orderList.forEach((element) => {
if (column.property === element.prop) {
column.order = element.order
}
})
},
- 在 el-table 自身逻辑中, sort-change 触发后会默认触发 header-cell-class-name 对应的方法
- 思路: sort-change 触发时，在 orderList 添加或删除排序字段, 之后在触发 header-cell-class-name 对应的方法时就可以去设置对应的列排序(以及是否排序)
注意
当要清空掉排序的前提下,然后重新渲染列表时,这时候有两种情况：
- 如果表格表头是动态渲染,清空排序操作：直接将动态表头先置为[]
- 如果表格表头是固定的,清空排序操作: 在 el-table 添加 v-if,获取新的数据前先将 v-if 条件置为 false,数据获取成功再置为 true
- el-table 提供的方法 clearSort 只能清除一个列的排序
