element-plus_设置el-table表格自适应高度

element-plus 设置el-table表格自适应高度

• 目前使用的最佳方案:

  • 将表格用一个外部容器包裹起来, 通过css来设置外部容器的高度
  • el-table表格使用height属性设置为100%高度

• 经测试可以实现效果的代码:

  • <div class="table_container" v-if="!isEmpty">
      <!-- 高度: 100vh - header padding40px - header40px - pagination40px-->
      <el-table
        :data="tableData"
        height="100%"
        border
        @row-click="viewCompanyInfo"
        :row-style="handleRowStyle"
        :row-key="row => row.id"
      >
    	<-- 省略表格内容 -->
     </el-table>
    </div>
    

  • & > .table_container {
      height: calc(100% - 80px);
    }
    

• 总结: 通过css来设置外部容器高度, 使得外部容器可以跟随页面大小的改变而改变; 为el-table设置height属性会直接写入到其DOM的style属性中, 也因此可以实现跟随外部容器大小的变化而变化

• 失败的实验:

  • 1. 通过el-table的max-height属性中写入calc()来动态计算高度, 但是意外却是max-height中的calc中可以计算涉及100vh的动态高度计算, 但是不能识别100%这一数据
    2. 通过监听resize事件, 动态修改el-table的height属性值. 但在测试中发现. 在el-table写入:height:tableConfig.height属性之后, el-table只能接受第一次的赋值, 后续对tableConfig.height值的修改不会触发视图的修改.