Elementui el-table踩坑笔记-动态列异常

在Elementui中，el-table的width，height属性设为100%，那么el-table会占满其父元素的宽高。如果表格实际展示宽高超过，会出现滚动条。

天啦噜，这是什么情况，怎么会表现不一致了呢？怎么会左表的滚动条跑到上面来了？这两个的差异就只有下图的，有个列的显隐，难道是这个的问题？

于是把该三段内容去掉试试，表现正常显示。但是该问题是怎么产生的，是因为渲染问题导致的吗？那好，doLayout试试，但是并没有用。那好直接放大招，加索引，让它重新加载。这样实现的原因是表格加载属于懒加载，所以切换表头的时候，让表格重新加载一次。于是在表格添加了 :key="tableNormalCheckKey"。然后在watch监听数据变动进行索引值调整

 let tableNormalCheckKey = new Date(
          $.ajax({
            type: "HEAD",
            async: false,
            cache: false,
          }).getResponseHeader("Date")
        ).getTime() + parseInt(Math.random() * 2000);
        _this.tableNormalCheckKey=tableNormalCheckKey;

至此，解决。

 

 备注：动态列这个问题隐藏了很多坑，比如遇到错位或不刷新，可以尝试以此方法解决。