前提:vue2、view-design 4.7.0
问题:要实现通过切换不同的选项,表格可能新增或删除某几个字段列,除了这几个字段不可排序,其他字段皆可切换排序。实现后发现,重新渲染表头后原本排序的表头字段没有高亮排序图标,导致表格数据接口的排序传参与展示不一致。
解决:手动设置表头字段的排序状态。
需要使用 sortType 参数,iview的表头排序通过sortType判断。可查看iview官网字段说明。具体实现如下:
// 表格字段-columns 排序字段-sortKey 排序方式-sortType
this.columns.forEach((item) => {
if(item.key === this.sortKey) {
item.sortType = this.sortType;
}
})
扩展:新增需求——在某一情形下需手动重置表格的排序。
实现:1. 重置排序相关变量; 2. 给table组件手动设置 key值,重置时改变key值变量。3. 由于之前手动设置了表头数据的sortType,因此在这里需要复原sortType参数。具体实现如下:
this.sortKey = '';
this.sortType = '';
this.columns.forEach((item) => {
if(item.sortType) {
item.sortType = '';
}
})
// 表格key值
this.tableKey += 1;