elementUi 动态生成table表头和固定列表格塌陷的问题

vue中elementUi 动态生成table表头和固定列表格塌陷的问题

事由：项目中很多时候都会用到自定义表格动态渲染出需要的表头名称，特别是elementUI中table需要使用到固定列机及其会出现表格塌陷的问题。

表格里面是有数据的，但是表格的高度塌陷了，导致内容被遮挡了。
解决：需要我们在updated生命周期中使用doLayout()重新渲染表格。

原因：数据从后端拿过来，数据太多还没来得及渲染完表格的高度就被固定死了，导致了表格塌陷的问题，所以我们得在数据更新完之后再重新渲染一下表格。

2021-7-22问题追加–当在两个标签页之间切换时会出现以下问题：表格下面多了一条线而且固定列右侧塌陷

原因：当两个页面切换（display：none到block，而出现这个问题的表格中是有列合并的操作）会导致页面回流，由于elementUI的表格高度是计算得出，发现这个表格的高度以及宽度与之前正常渲染的都发生了改变，这样就导致了固定列（el-table__fixed-body-wrapper）位置直接计算不准确导致塌陷。
解决：

//解决固定列距表格的高度（注意：这里我写死了表头为一行文字时的高度）
.el-table__fixed-body-wrapper {
            top: 48px !important;
        }
//解决多出来的横线(固定列右边)问题
.el-table__fixed-right {
            height: 100% !important;//设置高优先，以覆盖内联样式
        }
//若左右都有固定列时
.el-table__fixed{
            height: 100% !important; //设置高优先，以覆盖内联样式
        }

当然我猜测：如果你能在切换的时候延迟触发对应表格的doLayout（）方法来重新渲染表格，兴许也能解决这个问题。