Vue中Element-UI表格高度计算不当引发滚动错位的问题求助

我使用Element-UI的<el-table>组件，代码如下：

<el-table ref="table" :height="tableHeight"> </el-table>

当前通过以下方法计算表格高度：

calculateTableHeight() {
      if (!this.$refs.table) {
        return;
      }

      const tableElement = this.$refs.table.$el;
      const viewportHeight = window.innerHeight;
      const tableOffsetTop = tableElement.getBoundingClientRect().top;
      const bottomPadding = 30;

      this.tableHeight = viewportHeight - tableOffsetTop - bottomPadding;

      if (tableOffsetTop > viewportHeight / 2) {
        this.tableHeight = viewportHeight / 2;
      }
    },

表格每行带有复选框，选中时会显示“1 element selected”这类提示，但点击表格最后一行的复选框时，滚动条会异常上跳。希望调整高度计算方式或找到其他解决办法，求建议。

1. 提前预留提示栏高度，避免动态重绘触发跳动 #

问题核心是选中后提示栏出现，导致表格offsetTop变化，触发高度重计算进而引发滚动跳动。可以提前把提示栏的固定高度纳入计算：

calculateTableHeight() {
  if (!this.$refs.table) return;
  const tableElement = this.$refs.table.$el;
  const viewportHeight = window.innerHeight;
  const tableOffsetTop = tableElement.getBoundingClientRect().top;
  const bottomPadding = 30;
  const fixedTipHeight = 40; // 根据实际提示栏高度调整

  this.tableHeight = viewportHeight - tableOffsetTop - bottomPadding - fixedTipHeight;

  if (tableOffsetTop > viewportHeight / 2) {
    this.tableHeight = viewportHeight / 2 - fixedTipHeight;
  }
},

同时限制高度计算的触发时机，只在窗口resize时调用，去掉选中事件中可能存在的高度计算调用：

mounted() {
  window.addEventListener('resize', this.calculateTableHeight);
  this.calculateTableHeight();
},
beforeDestroy() {
  window.removeEventListener('resize', this.calculateTableHeight);
}

2. 改用CSS固定最大高度，让表格自主处理滚动 #

放弃JS动态计算，用CSS直接设置表格最大高度，避免动态修改高度带来的滚动异常：

<el-table ref="table" style="max-height: calc(100vh - 120px); overflow: auto;"> </el-table>

其中120px是表格上方内容（含提示栏预留高度）和下方padding的总和，根据实际布局调整数值。

3. 阻止复选框点击的默认滚动行为 #

部分场景下滚动跳动是因为复选框点击触发了页面自动聚焦，可在选中事件中阻止默认行为：

<el-table-column type="selection" @select.prevent="handleSelect"> </el-table-column>

handleSelect(val, row) {
  // 你的选中逻辑代码
}

4. 延迟更新表格高度（保底方案） #

如果必须保留动态计算逻辑，在提示栏显示后延迟一段时间再更新高度，待DOM稳定后再计算：

handleSelect() {
  // 你的选中逻辑
  setTimeout(() => {
    this.calculateTableHeight();
  }, 100);
}

内容的提问来源于stack exchange，提问作者the man in the pink suit