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

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

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

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

    原文作者:password-u
    原文地址: https://blog.csdn.net/u013992330/article/details/124880877
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞