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,

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 "";

},

}

```

以上。

分类 ：日常记录

直接切入正题。

多列排序主要用到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 }) {

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 "";

},

}

```

以上。

评论(0)

先登录，才能发评论哦~