问题
排序表格默认第一列按降序排(状态1
),当点击其他列后(状态2
),改变日期,触发表格数据更新,发现列的排序还点亮在之前的操作上,没有按照默认来(回到状态1
)。
在table-header.js中,针对defaultSort的处理源码如下:
mounted() {// nextTick 是有必要的 https://github.com/ElemeFE/element/pull/11311this.$nextTick(() => {const { prop, order } = this.defaultSort;const init = true;this.store.commit('sort', { prop, order, init });});}
源码中没有监听default-sort的变化,导致外面数据变更,但表格还是之前的排序操作按钮点亮
解决办法
在我们自己的代码中,手动执行这个代码即可
// 初始默认code列降序排this.defaultSort = {prop: 'code',order: 'descending',
}
// el-table 需要手动触发排序
this.handleSortChange(this.defaultSort)// 修改默认点亮按钮
this.$nextTick(() => {this.$refs.refTable?.store.commit('sort', { ...this.defaultSort, init: true });
});