elementui el-table 如何自适应撑满高度？

前言

当在做PC端管理系统的时候，总是绕不开报表。当报表单页数据比较多或者过少时，要么不铺满全屏，要么分页顶的看不到。这时候产品看不下去了，说不想当前页面的分页按钮还要靠鼠标滚动才能展示出来。怎么办？网上有一些解决方法就是通过屏幕高度减去查询表单的高度去计算高度赋值表格,我觉得挺麻烦的，直接用css了。

Demo

布局如下，app-connainer一般就是放的我们的<router-view/> ,这里以此为例子。

思路

首先设置app-connainer的高度为calc(100%-84px)，然后利用flex纵向排列,将筛选条件main-1和分页main-3分别放在顶部和底部，中间table部分main-2自适应。核心就是 main-2作为el-table的父元素，父元素flex:1，子元素高度设置为100%即可! 。

主要代码

Vue

<template>
  <div class="app-container">
     <div class="main-1" v-toggle v-show="showSearch">
       <el-form-item label="菜单名称" prop="menuName">
         <el-input
            v-model="queryParams.menuName"
            placeholder="请输入菜单名称"
            clearable
            style="width: 200px"
            @keyup.enter="handleQuery"
         />
      </el-form-item>
      <el-form-item label="状态" prop="status">
         <el-select v-model="queryParams.status" placeholder="菜单状态" clearable style="width: 200px">
            <el-option
               v-for="dict in sys_normal_disable"
               :key="dict.value"
               :label="dict.label"
               :value="dict.value"
            />
         </el-select>
      </el-form-item>
      <div class="main-2">
         <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
               <el-button
                  type="primary"
                  plain
                  icon="Plus"
                  @click="handleAdd"
                  v-hasPermi="['system:menu:add']"
               >新增</el-button>
            </el-col>
         </el-row>
         <el-table height="100%"
         v-if="refreshTable"
         v-loading="loading"
         :data="menuList"
         row-key="menuId"
         :default-expand-all="isExpandAll"
         :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" 
      >
         <el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="160"></el-table-column>
            <el-table-column prop="icon" label="图标" align="center" width="100">
               <template #default="scope">
                  <svg-icon :icon-class="scope.row.icon" />
               </template>
            </el-table-column>
         </el-table>
      </div>
      <div class="main-3">
        <pagination
         v-show="total > 0"
         :total="total"
         v-model:page="queryParams.pageNum"
         v-model:limit="queryParams.pageSize"
         @pagination="getList"
      />
      </div>
    </div>
  </div>
</template>

css

//main-container全局样式
.app-container {
  padding: 20px;
  height: calc(100vh - 84px);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.main-2{
  flex: 1; 
  overflow: hidden;
  display: flex;
  flex-direction: column;
}