element el-table多列多字段同时排序后端返回数据(支持多个字段同时进行排序)
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
element el-table多列多字段同时排序后端返回数据(支持多个字段同时进行排序)
场景
描述
element el-table仅才支持单列(一个字段)进行排序,想要支持多列排序,首先要定义一个数组,用于存放所有排序的字段及其顺序,
设置列sortable=“custom”,结合sort-change事件,在点击排序箭头时进行排序操作
<template>
<el-table
:data="tableData"
style="width: 100%"
:default-sort = "{prop: 'date', order: 'descending'}"
@sort-change="handleTableSort"
@selection-change="selectHandle"
@row-click="rowClickHandle"
:header-cell-class-name="handleHeaderCellClass"
>
<el-table-column
prop="date"
label="日期"
sortable="custom"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
sortable="custom"
width="180">
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}],
realParams: {
ordersList: [],
},
}
},
methods: {
// 设置列的排序为我们自定义的排序
handleHeaderClass({ column }) {
column.order = column.multiOrder;
},
// 点击排序箭头
handleOrderChange(orderColumn, orderState) {
if (!orderState) {
this.realParams.ordersList = this.realParams.ordersList.filter(
(item) => {
return item.property !== orderColumn;
}
);
} else {
let result = this.realParams.ordersList.find(
(e) => e.property === orderColumn
);
if (result) {
result.direction = orderState == "descending" ? "DESC" : "ASC";
} else {
this.realParams.ordersList.push({
property: orderColumn,
direction: orderState == "descending" ? "DESC" : "ASC",
});
}
}
},
// 列表排序
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);
},
selectHandle(selectRows) {
let selectIds = [];
let delDataLabelIdAndName = [];
let delDataLabelIdAndNameIds = [];
selectRows.forEach((item) => {
// 修改所属分类(选择多个进行删除)对分类集合去重
item.dataLabelIdAndName.forEach((labelItem) => {
if (!delDataLabelIdAndNameIds.includes(labelItem.labelId)) {
delDataLabelIdAndNameIds.push(labelItem.labelId);
delDataLabelIdAndName.push({
label: labelItem.labelName,
value: labelItem.labelId,
});
}
});
selectIds.push(item.id);
});
this.$emit("selectHandle", selectIds, delDataLabelIdAndName);
},
}
}
</script>
<style lang="less" scoped>
/deep/table {
width: 100% !important;
}
/deep/.el-table__empty-block {
width: 100% !important;
}
</style>
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献5条内容
所有评论(0)