第一步 表格添加配置
<el-table
@sort-change="onSortChange"
:header-cell-class-name="handleHeaderClass"
:header-cell-style="handleTheadStyle">
第二步 设置你和后端约定好的 自定义custom 排序传参字段
此处我和后端约定好是 当element 组件是 descending ，就转换为 DESC
可自定义或者无需声明变量
const SortMap = {
descending: "DESC",
ascending: "ASC",
};
const ReversalSortMap = {
DESC: "descending",
ASC: "ascending",
};
第三步 data设置一个 存储多列排序变量
data(){
return{
//缓存排序规则
ordersList: []
// { prop :"", order:"DESC"} 此处是排序字段的结构。不同需求设计因人而异
第四步 过滤掉order为空 null 的情况。因为element 排序的值可以是 descending ascending 或 null。将这个作为排序参数传给后端，避免 null 值传递
computed:{
orderListParams() {
return this.ordersList.filter(item => item.order);
}
第四步 假如表格需要支持第一次加载数据有 默认排序 可在配置上添加 defaultSortOrder
//在 created 上进行初始化
created() {
this.ordersList = this.tableConfig
.filter(item => item.defaultSortOrder)
.map(item => ({
prop: item.eleAttr.prop,
order: item.defaultSortOrder
}))
}
此处tableconfig为 (每个人的表格列配置结构和 命名不一样，此处为了方便演示)
[{
defaultSortOrder:"ASC",
eleAttr: {
label: "日期",
prop: "date",
sortable: "custom", (可以为 true 或 custom)
}
}
]
对应
<el-table-column
prop="date"
label="日期"
:sortable="eleAttr.sortable"
>
</el-table-column>
第五步 添加处理方法
// 设置列的排序为我们自定义的排序 （无法支持默认排序，故而采用 handleTheadStyle）
handleHeaderClass({ column }) {
column.order = column.multiOrder;
},
// 设置列的排序为我们自定义的排序 (多列的情况下使用)
handleTheadStyle({ row, column, rowIndex, columnIndex }) {
//该回调方法初始化的时候每一列都会调用，为提升性能， 增加下边两个if 判断
if (this.orderListParams && this.orderListParams.length) {
const single = this.orderListParams.find(item => item.prop === column.property)
if (single) {
//由于是和后端自定义了字段，和 eltable不一样，所以要 ReversalSortMap 反转回来
column.order = ReversalSortMap[single.order]
}
}
}
onSortChange({ column, prop, order }) {
column.multiOrder = order;
if (prop) {
const result = this.ordersList.find(item => item.prop === prop);
const orderValue = SortMap[order]
if (result) {
result.order = orderValue;
} else {
this.ordersList.push({
prop,
order: orderValue,
});
}
}
//此方法 表格数据查询接口
this.getTableData();
}
//下一页的时候
onPageChange(pageConfig) {
const { page, pageSize } = pageConfig;
// do something.....
this.getTableData();
}
// 获取列表数据
getTableData() {
let submitData = {
page: {
page,
pageSize,
// 根据服务端约定传递
sort: this.orderListParams,
}
}
//api
xxxx(submitData).then(xxxx)
}
其他参考文献
https://blog.csdn.net/qq_37485170/article/details/134138801
