解决element表格 固定列后上下滑动出现错位问题

element-ui table组件内部对滚动事件做了防抖。它不会实时修改非固定列的位置 ,有几毫秒的延迟

1、给table添加ref="tableRef"

<el-table  :data="tableData" ref="tableRef" > </el-table>        

2、在获取数据后重新渲染表格并且获取普通列滚动高度后让固定列滚动相应距离

    this.tableData = tableData
      this.$nextTick(() => {
          this.$refs.tableRef.doLayout();
          setTimeout(()=>{
            let dom = this.$refs['tableRef'].bodyWrapper
            dom.addEventListener('scroll', () => {
                let scrollTop = dom.scrollTop//滚动高度
                this.$refs['tableRef'].$refs.fixedBodyWrapper.scrollTop = scrollTop
            });
          })
      })

 

posted @ 2023-05-30 10:26  涼皮Herr  阅读(1593)  评论(0编辑  收藏  举报