在我们需要对表格的列做动态的显示/隐藏时,会遇到一个问题,那就是在某一列从隐藏到显示时,整个表格会闪烁,仔细观察会发现是表格的表头高度瞬间变大,然后又缩回去了,这就导致一个问题,表格数据域的高度会变小,经定位分析,问题原因总结如下:
- 由于el-table表格的高度是根据当前表格数据域的空间,由内向外动态计算出来的固定值;
- 通过定位发现,在某一列从隐藏到显示时,表头的高度变大了(差不多两个表头的高度),此时留给表格数据域的高度则是减去两个表头的高度,然后剩余的高度;
- 而在表格数据域的高度计算完成后,表头又恢复到了一个表头高度的样子,此时表格数据域也随之上移,从而导致表格数据域高度变小,且下边出现了空闲区域;
- 简而言之就是,计算表格数据域高度时,表头占了两个表头的高度,而计算完成后,表头恢复到了一个表头的高度,但是表格数据域的高度并没有重新再进行计算。
【解决方案】给表头设定固定高度,这样在某一列从隐藏到显示时,虽然表头会闪动,但是表头的高度不会再增加,表格数据域的高度也就不会变化。
本文探讨了el-table中列隐藏显示导致的表格闪烁问题,源于表头高度计算不一致。通过设定表头固定高度,避免了数据域高度变化,提供了解决方案。
985

被折叠的 条评论
为什么被折叠?



