Bootstrap

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

  1. 当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(),就可以了

;