第一步 表格添加配置
<el-table
@sort-change="onSortChange"
:header-cell-class-name="handleHeaderClass"
:header-cell-style="handleTheadStyle">
第二步 設(shè)置你和后端約定好的 自定義custom 排序傳參字段
此處我和后端約定好是 當(dāng)element 組件是 descending ,就轉(zhuǎn)換為 DESC
可自定義或者無(wú)需聲明變量
const SortMap = {
descending: "DESC",
ascending: "ASC",
};
const ReversalSortMap = {
DESC: "descending",
ASC: "ascending",
};
第三步 data設(shè)置一個(gè) 存儲(chǔ)多列排序變量
data(){
return{
//緩存排序規(guī)則
ordersList: []
// { prop :"", order:"DESC"} 此處是排序字段的結(jié)構(gòu)。不同需求設(shè)計(jì)因人而異
第四步 過(guò)濾掉order為空 null 的情況。因?yàn)閑lement 排序的值可以是 descending ascending 或 null垂睬。將這個(gè)作為排序參數(shù)傳給后端钳枕,避免 null 值傳遞
computed:{
orderListParams() {
return this.ordersList.filter(item => item.order);
}
第四步 假如表格需要支持第一次加載數(shù)據(jù)有 默認(rèn)排序 可在配置上添加 defaultSortOrder
//在 created 上進(jìn)行初始化
created() {
this.ordersList = this.tableConfig
.filter(item => item.defaultSortOrder)
.map(item => ({
prop: item.eleAttr.prop,
order: item.defaultSortOrder
}))
}
此處tableconfig為 (每個(gè)人的表格列配置結(jié)構(gòu)和 命名不一樣蝌借,此處為了方便演示)
[{
defaultSortOrder:"ASC",
eleAttr: {
label: "日期",
prop: "date",
sortable: "custom", (可以為 true 或 custom)
}
}
]
對(duì)應(yīng)
<el-table-column
prop="date"
label="日期"
:sortable="eleAttr.sortable"
>
</el-table-column>
第五步 添加處理方法
// 設(shè)置列的排序?yàn)槲覀冏远x的排序 (無(wú)法支持默認(rèn)排序自晰,故而采用 handleTheadStyle)
handleHeaderClass({ column }) {
column.order = column.multiOrder;
},
// 設(shè)置列的排序?yàn)槲覀冏远x的排序 (多列的情況下使用)
handleTheadStyle({ row, column, rowIndex, columnIndex }) {
//該回調(diào)方法初始化的時(shí)候每一列都會(huì)調(diào)用,為提升性能糟把, 增加下邊兩個(gè)if 判斷
if (this.orderListParams && this.orderListParams.length) {
const single = this.orderListParams.find(item => item.prop === column.property)
if (single) {
//由于是和后端自定義了字段雄可,和 eltable不一樣数苫,所以要 ReversalSortMap 反轉(zhuǎn)回來(lái)
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,
});
}
}
//此方法 表格數(shù)據(jù)查詢(xún)接口
this.getTableData();
}
//下一頁(yè)的時(shí)候
onPageChange(pageConfig) {
const { page, pageSize } = pageConfig;
// do something.....
this.getTableData();
}
// 獲取列表數(shù)據(jù)
getTableData() {
let submitData = {
page: {
page,
pageSize,
// 根據(jù)服務(wù)端約定傳遞
sort: this.orderListParams,
}
}
//api
xxxx(submitData).then(xxxx)
}
其他參考文獻(xiàn)
https://blog.csdn.net/qq_37485170/article/details/134138801