ElementUI el-table路由跳转后el-table__fixed高度减少17px问题求助

问题根因 #

17px为浏览器默认滚动条宽度，该异常是路由切换后表格高度重计算时，未正确统计滚动条占位导致的。

原因分类 #

ElementUI 本身已知Bug #

ElementUI 2.x存在固定列高度计算的已知缺陷：当表格所在页面被<keep-alive>缓存时，路由返回触发的表格重布局逻辑执行时机早于滚动条渲染完成，计算固定列高度时没有包含滚动条高度，最终出现17px的高度差。

常见使用不当场景 #

• 未给el-table设置明确固定高度，或动态高度计算逻辑在路由切换时未同步更新
• 表格数据是路由返回后异步请求加载的，表格首次计算高度时数据未渲染、无滚动条，数据加载完成出现滚动条后固定列未同步更新高度
• 缓存页面未在activated钩子中手动触发表格重布局

修复方案 #

方案1：手动触发表格重布局 #

给el-table设置ref属性，在页面的activated（缓存页面）或mounted（非缓存页面）钩子中调用表格的doLayout方法，需配合$nextTick确保DOM渲染完成：

// 缓存页面使用activated钩子
activated() {
  this.$nextTick(() => {
    // yourTableRef替换为你给el-table设置的ref属性值
    this.$refs.yourTableRef.doLayout()
  })
}

方案2：样式强制覆盖 #

通过全局样式或组件作用域样式强制固定列高度和表格主体同步，避免计算逻辑异常：

/* Vue2用/deep/，Vue3用::v-deep */
/deep/ .el-table__fixed, 
/deep/ .el-table__fixed-right {
  height: 100% !important;
}
/deep/ .el-table__fixed-body-wrapper {
  /* 40px为默认表头高度，可根据实际表头高度调整 */
  height: calc(100% - 40px) !important;
}

方案3：规范表格高度设置 #

避免给el-table使用min-height属性，统一设置明确的height属性，可使用动态绑定：

<el-table
  ref="yourTableRef"
  :height="tableHeight"
  :data="tableData"
>
  <!-- 表格列内容 -->
</el-table>

内容的提问来源于stack exchange，提问作者McMuellermilch