vue el-table 显示隐藏列异常-表格数据域高度变小

vue el-table 显示隐藏列异常-表格数据域高度变小,第1张

        在我们需要对表格的列做动态的显示/隐藏时,会遇到一个问题,那就是在某一列从隐藏到显示时,整个表格会闪烁,仔细观察会发现是表格的表头高度瞬间变大,然后又缩回去了,这就导致一个问题,表格数据域的高度会变小,经定位分析,问题原因总结如下:

由于el-table表格的高度是根据当前表格数据域的空间,由内向外动态计算出来的固定值;通过定位发现,在某一列从隐藏到显示时,表头的高度变大了(差不多两个表头的高度),此时留给表格数据域的高度则是减去两个表头的高度,然后剩余的高度;而在表格数据域的高度计算完成后,表头又恢复到了一个表头高度的样子,此时表格数据域也随之上移,从而导致表格数据域高度变小,且下边出现了空闲区域;简而言之就是,计算表格数据域高度时,表头占了两个表头的高度,而计算完成后,表头恢复到了一个表头的高度,但是表格数据域的高度并没有重新再进行计算。

【解决方案】给表头设定固定高度,这样在某一列从隐藏到显示时,虽然表头会闪动,但是表头的高度不会再增加,表格数据域的高度也就不会变化。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1296797.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-06-10
下一篇 2022-06-10

发表评论

登录后才能评论

评论列表(0条)

保存