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()方法来重新渲染表格,兴许也能解决这个问题。