Element UI的表格高度自适应。

项目场景：

在开发后台管理系统的时候，我们的main区域有时会因为表格的高度固定导致不同分辨率情况下展示不同，低分辨率情况下会出现整体竖向滚动条。

---

问题描述

element ui的表格有height属性，但是他是固定的，不会随着分辨率不同进行自适应。低分辨率可能会出现滚动条。

<el-table
    :data="tableData"
    height="250"
    border
    style="width: 100%">

---

解决方案：

可以将element ui table的height属性高度进行calc(100vh - xx)进行自适应。这样表格高度就会随着分辨率不同进行自适应。其中xx单位可以为px，也可以为rem。

如果配置了rem，推荐使用rem。

<el-table
    :data="tableData"
    height="calc(100vh - 100px)"
    border
    style="width: 100%">

<el-table
    :data="tableData"
    height="calc(100vh - 10rem)"
    border
    style="width: 100%">