vue树形多列_[vue]使⽤Element-ui的el-table实现多列同时排
序。
freddon
发表于2019-09-09
阅读 2578 |
评论 0
最近遇到默认排序只会保留当前排序，所以根据⽂档实现多列排序
直接切⼊正题。
多列排序主要⽤到el-table的`header-cell-class-name`和`sort-change`;
__header-cell-class-name__
> 表头单元格的 className 的回调⽅法，也可以使⽤字符串为所有表头单元格设置⼀个固定的 className。
__sort-change__
> 当表格的排序条件发⽣变化的时候会触发该事件
先开启远程搜索，给需要排序的列上加`sortable='custom'`
核⼼代码：
```html
@sort-change="handleSortChange"
:data="tableData"
:header-cell-class-name="handleHeaderCellClass">
const maxOrderCount = 2;//最⼤同时排序个数
//....
data(){
return {
orderDict: {},//prop属性对应的升降序排序字典
vue element adminorderStackSet: [],//排序顺序，存储的prop属性字段
}
},
methods: {
numericString,
handleSortChange({ column, prop, order }) {
if (order) {
} else {
derDict[prop];
}
if (derStackSet.length > maxOrderCount) {
let derStackSet.splice(0,1);
let leftEl=del[0];
derDict[leftEl];
}
this.loadData();//⽹络请求
},
handleHeaderCellClass({ row, column, rowIndex, columnIndex }) {
if (derStackSet.length > 0) {
let arr = derStackSet;
let currentField = arr[arr.length - 1];
if (currentField) {
derDict[column.property];
}
}
return "";
},
}
```
以上。
分类 ：⽇常记录
直接切⼊正题。
多列排序主要⽤到el-table的`header-cell-class-name`和`sort-change`;
__header-cell-class-name__
> 表头单元格的 className 的回调⽅法，也可以使⽤字符串为所有表头单元格设置⼀个固定的 className。__sort-change__
> 当表格的排序条件发⽣变化的时候会触发该事件
先开启远程搜索，给需要排序的列上加`sortable='custom'`
核⼼代码：
```html
@sort-change="handleSortChange"
:data="tableData"
:header-cell-class-name="handleHeaderCellClass">
const maxOrderCount = 2;//最⼤同时排序个数
//....
data(){
return {
orderDict: {},//prop属性对应的升降序排序字典
orderStackSet: [],//排序顺序，存储的prop属性字段
}
},
methods: {
numericString,
handleSortChange({ column, prop, order }) {
} else {
derDict[prop];
}
if (derStackSet.length > maxOrderCount) {
let derStackSet.splice(0,1);
let leftEl=del[0];
derDict[leftEl];
}
this.loadData();//⽹络请求
},
handleHeaderCellClass({ row, column, rowIndex, columnIndex }) { if (derStackSet.length > 0) {
let arr = derStackSet;
let currentField = arr[arr.length - 1];
if (currentField) {
derDict[column.property];
}
}
return "";
},
}
```
以上。
评论(0)
先登录，才能发评论哦~

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。