el-table fixed 高度错位

868 阅读1分钟

现象

在给el-table设置fixed属性后,表格尺寸变化后发现fixed的table与非fixed的table高度存在错位

image.png

原因

image.png

fixed table的top属性设置有问题

top的值是表头高度

当表头高度变化之后就会出现错位

element table使用了ResizeObserver来监听table的尺寸变化

尺寸变化后进入

doLayout() {
        this.layout.updateColumnsWidth();
        if (this.shouldUpdateHeight) {
          this.layout.updateElsHeight();
        }
      },

首先是列宽调整,然后是高度调整

image.png

可以看到在ResizeObserver回调的时候,右边fixed table的表格没有把正常table的那两列给盖住,需要调整列宽让那两列被fixed覆盖掉

列宽调整了之后,表头高度也发生了变化,但是此时回调计算的表头高度还是两行文字的高度,造成了高度错位。

应该把回调设置top的实际设置在渲染之后,也就是updateElsHeight应该放在nextTick