关于element table组件父盒子高度变化table高度不响应的问题

后台页面结构很复杂的时候，table同时需要自适应页面高度时，又或者调整浏览器窗口大小时，就会出现table高度适配问题。如图所示：

写个demo来解决这个问题：

    <div class="page">
      <el-collapse accordion>
        <el-collapse-item title="功能菜单">
        ...
        </el-collapse-item>
      </el-collapse>
      <div class="list-box">
        <el-table :data="tableData" height="100%" :style="width:100%">
          <el-table-column prop="date" label="日期" width="180">
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="180">
          </el-table-column>
          <el-table-column prop="address" label="地址">
          </el-table-column>
        </el-table>
      </div>
      <div>
        <el-pagination background layout="prev, pager, next" :total="1000">
        </el-pagination>
      </div>
    </div>

table组件需要高度自适应页面剩余高度，保持所有UI不超出浏览器，样式通常这样实现：

.page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  .list-box {
    flex: 1;
  }
}

使用flex弹性盒子去实现子元素填充剩余空间。但table组件渲染后高度并不会随着父盒子变化而变化，这时给父盒子加一个height属性，父盒子给一个overflow: hiddle就能使table组件高度自适应。如没效果，overflow: hiddle的位置根据页面结构自己调试添加位置就好

.page {
  height: 100vh;
  display: flex;
  overflow: hiddle;
  .list-box { 
    height: 0;
    flex: 1; 
  }
}

补充：官方对table高度的说法是：

Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。

如果还没有解决问题，欢迎留言