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 });
});
相关推荐
reembarkation10 分钟前
使用pdfjs-dist 预览pdf,并添加文本层的实现
前端·javascript·pdf
reembarkation13 分钟前
vue-pdf 实现blob数据的预览
javascript·vue.js·pdf
KenXu26 分钟前
F2C-PTD工具将需求快速转换为代码实践
前端
给月亮点灯|35 分钟前
Vue3基础知识-setup()、ref()和reactive()
前端·javascript·vue.js
芜青36 分钟前
【Vue2手录12】单文件组件SFC
前端·javascript·vue.js
冷冷的菜哥36 分钟前
react实现无缝轮播组件
前端·react.js·typescript·前端框架·无缝轮播
hrrrrb43 分钟前
【Python】字符串
java·前端·python
阿笑带你学前端1 小时前
Supabase云同步架构:Flutter应用的数据同步策略
前端
Martin-Luo1 小时前
Vue3 通过json配置生成查询表单
javascript·vue.js·json
梦想CAD控件1 小时前
(在线CAD平台)网页集成CAD SDK的方法
前端·javascript·github