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

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

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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

password-u

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值