[vue]使用Element-ui的el-table实现多列同时排序。
freddon
发表于2019-09-09
阅读 3188 |
评论 0
最近遇到默认排序只会保留当前排序,所以根据文档实现多列排序
直接切入正题。
多列排序主要用到el-table的`header-cell-class-name`和`sort-change`;
__header-cell-class-name__
> 表头单元格的 className 的回调方法,也可以使用字符串为所有表头单元格设置一个固定的 className。
__sort-change__
> 当表格的排序条件发生变化的时候会触发该事件
先开启远程搜索,给需要排序的列上加`sortable='custom'`
核心代码:
```html
<el-table class="auto-scroll"
@sort-change="handleSortChange"
:data="tableData"
:header-cell-class-name="handleHeaderCellClass">
<!-- 中间省略-->
</el-table>
<script>
const maxOrderCount = 2;//最大同时排序个数
//....
data(){
return {
orderDict: {},//prop属性对应的升降序排序字典
orderStackSet: [],//排序顺序,存储的prop属性字段
}
},
methods: {
numericString,
handleSortChange({ column, prop, order }) {
this.orderStackSet=this.orderStackSet.filter(item=>item!=prop);
if (order) {
this.orderDict[prop] = order;
this.orderStackSet.push(prop);
} else {
delete this.orderDict[prop];
}
if (this.orderStackSet.length > maxOrderCount) {
let del=this.orderStackSet.splice(0,1);
let leftEl=del[0];
delete this.orderDict[leftEl];
}
this.loadData();//网络请求
},
handleHeaderCellClass({ row, column, rowIndex, columnIndex }) {
if (this.orderStackSet.length > 0) {
let arr = this.orderStackSet;
let currentField = arr[arr.length - 1];
if (currentField) {
return this.orderDict[column.property];
}
}
return "";
},
}
</script>
```
以上。
分类 :日常记录