vue树形多列_[vue]使用Element-ui的el-table实现多列同时排序。

freddon

发表于2019-09-09

阅读 2673 |

评论 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属性对应的升降序排序字典

orderStackSet: [],//排序顺序，存储的prop属性字段

}

},

methods: {

numericString,