解决element-ui中的el-table中列更新问题以及滚动条会重置到最顶部的问题

Wang__dream

已于 2023-02-23 11:27:57 修改

阅读量8.2k

点赞数 11

分类专栏： vuejs html 文章标签： vue.js elementui javascript

于 2022-12-19 11:37:45 首次发布

本文链接：https://blog.youkuaiyun.com/Wang__dream/article/details/128370636

版权

vuejs 同时被 2 个专栏收录

1 篇文章

订阅专栏

html

1 篇文章

订阅专栏

本文介绍了在Vue.js中如何在el-table组件完成渲染后动态更新列数据，通过设置key属性和使用Math.random()实现数据刷新。同时，针对更新数据导致滚动条重置到顶部的问题，提供了一种解决方案：记录滚动条高度，在更新key后恢复原高度，确保滚动位置不变。详细方法包括在refreshTable方法中保存并还原滚动条高度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当table渲染完成后需要动态更新列的数据时候，此时在el-table属性增加key就可以，例如：
1. ```
<el-table ref="table" :key="key"
```

增加data属性 key,最后需要重新刷新的方法里加上 this.key = Math.random() 就可以

2.问题2，调用 this.key = Math.random()后会导致table的滚动条被重置到最上面的问题，解决办法就是，调用this.key之前先记录滚动条高度，调用完成后还原成之前的高度

完美解决方法

/**
     * 刷新table,防止滚动条跑到最上面
    */
refreshTable() {
      const beforeScrollTop = this.$refs.table.$el.querySelector('div.el-table__body-wrapper').scrollTop
      this.key = Math.random()
      setTimeout(() => {
        this.$refs.table.$el.querySelector('div.el-table__body-wrapper').scrollTop = beforeScrollTop
      }, 0)
    },

在需要刷新的地方调用 this.refreshTable()，就可以了