element-ui的table，切换路由后高度变小

Question

问题描述

我的一个单页面组件中，用到element-ui的el-table组件。一开始进入这个包含这个组件的页面时，el-table渲染正常；当切换出去另一个路由再回来时，el-table的height和el-table_body-wrapper的height不一致，el-table_body-wrapper的height要比el-table的height减去el-table_header-wrapper的height的值还要小。

问题出现的环境背景及自己尝试过哪些方法

尝试阅读element-ui的table组件，发现el-table_body-wrapper的height取自bodyHeight这个计算属性，但是没看明白为什么来回切换了路由后，数值会变化？

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

你期待的结果是什么？实际看到的错误信息又是什么？

el-table_body-wrapper元素能占满el-table减去el-table_header-wrapper后的高度

Answer 1

同样遇到类似的问题，网上查过，说高度变小是这个elemen-ui里面内部的bug，解决方法是：
1.首先定死表头的高度
2.然后body_wrapper使用calc来减去表头高度

.table {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%
  }
.table >>> .el-table__header-wrapper {
    height: 90px;
  }
.table >>> .el-table__body-wrapper {
    height: calc(100% - 90px) !important;
  }

Answer 2

可能:
1.切换后的vue组件里css没加scoped
2.具体问题具体分析，在浏览器F12开发下，比较前后的CSS
....

Answer 3

1、vue组件里css都加scoped的，
2、在浏览器F12开发下，

一开始：.el-table元素的style="height: 689px;",.el-table__body-wrapper元素的style="height: 645px"; 
切换路由后：.el-table元素的style="height: 689px;",.el-table__body-wrapper元素的style="height: 622px"; 
切换路由后， el-table的body高度变小了， 导致表格下方有一块空白行。

Answer 4

如果上面的办法无效,可以尝试在更新表格数据后重载

this.$nextTick(() => {
     this.$refs.multipleTable.doLayout();
     // el-table加ref="multipleTable"
 });