526互联

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

发布时间 2023-09-03 01:03:33作者: Steperouge

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值的修改不会触发视图的修改.