elementUI——el-table自带排序使用问题

一条大河全靠浪2023-09-11 8:45

问题

排序表格默认第一列按降序排（状态1），当点击其他列后（状态2），改变日期，触发表格数据更新，发现列的排序还点亮在之前的操作上，没有按照默认来（回到状态1）。

在table-header.js中，针对defaultSort的处理源码如下：

js 复制代码

  mounted() {
    // nextTick 是有必要的 https://github.com/ElemeFE/element/pull/11311
    this.$nextTick(() => {
      const { prop, order } = this.defaultSort;
      const init = true;
      this.store.commit('sort', { prop, order, init });
    });
  }

源码中没有监听default-sort的变化，导致外面数据变更，但表格还是之前的排序操作按钮点亮

解决办法

在我们自己的代码中，手动执行这个代码即可

js 复制代码

// 初始默认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 });
});