使用element-ui调用table表格错位问题

一、问题描述：

        使用element-ui调用table组件，经常会遇到切换菜单时表格显示错位问题。

二、问题现象：

        

 三、问题原因：

        el-table的高度自适应，在页面动态切换后出现错位问题。

四、解决方案：

        ①在el-table上添加ref="elTable"（elTable可以自定义）。

        ②在页面加载时加上下列代码。

this.$nextTick(() => {
   this.$refs.elTable.doLayout()
})

        官方文档中对此有解释说明，使用 doLayout可以重新布局。

        官网链接：Element - The world's most popular Vue UI framework

2021.12.28补充：
如数据过多，仍出现表格不能复位可采取进一步措施：
①el-table加上:key="Math.random()";
②加上setTimeout时间延迟；

setTimeout(() => {
  this.$nextTick(() => {
    this.$refs.elTable.doLayout();
  });
}, 100);

加上上面两步即可。

2021.1.13补充：
如路由使用了keep-alive缓存，导致页面组件被缓存，因高度为动态计算获取，从而出现固定列错位。

解决方法是在vue生命周期函数 activated 执行表格重载即可。

activated() {
  this.$nextTick(() => {
    this.$refs.elTable.doLayout();
  });
},