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

问题

排序表格默认第一列按降序排(状态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 });
});
相关推荐
九十一1 分钟前
websocket的连接原理
前端·javascript
念你那丝微笑9 分钟前
vue实现批量导出二维码到PDF(支持分页生成 PDF)
前端·vue.js·pdf
Renounce14 分钟前
《Android Handler:线程间通信的核心实现》
前端
CAD老兵16 分钟前
打造高性能二维图纸渲染引擎系列(一):Batched Geometry 助你轻松渲染百万实体
前端·webgl·three.js
前端老宋Running17 分钟前
微信小程序的操作日志收集模块
前端
CAD老兵20 分钟前
打造高性能二维图纸渲染引擎系列(三):高性能 CAD 文本渲染背后的隐藏工程
前端·webgl·three.js
不太会写24 分钟前
又开始了 小程序定制
vue.js·spring boot·python·小程序
CAD老兵24 分钟前
打造高性能二维图纸渲染引擎系列(二):创建结构化和可扩展的渲染场景
前端·webgl·three.js
王木风25 分钟前
1分钟理解什么是MySQL的Buffer Pool和LRU 算法?
前端·mysql
Jerry_Rod27 分钟前
vue 项目如何使用 mqtt 通信
前端·vue.js