本文主要是介绍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（）方法来重新渲染表格，兴许也能解决这个问题。
这篇关于elementUi 动态生成table表头和固定列表格塌陷的问题的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
