css来做el-table高度自适应

2,909 阅读2分钟

前言

当在做PC端管理系统的时候,总是绕不开报表。当报表单页数据比较多时,就会出现滚动条。这时候产品看不下去了,说不想当前页面的分页按钮还要靠鼠标滚动才能展示出来。辣么这个问题怎么搞嘞?网上有一些解决方法就是通过resize事件去计算高度去赋值,我觉得挺麻烦的,直接用css了。

现象

现在的布局就是这样情况,滚动条滚到底才看的到 el-pagination微信图片_20210707171452.png

Demo

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

<template>
  <div class="table">
    <div class="wrapper">
      <div class="sidebar">
        <span>左侧菜单</span>  
      </div>
      <div class="main-contanier"> 
        <div class="fixed-header"> 固定头部 </div>
        <section class="app-main">
          <div class="main-1">
            <!-- 查询条件 -->
          </div>
          <div class="main-2">
            <!-- table表 -->
          </div>
          <div class="main-3">
           <!-- 分页 -->
          </div>
        </section>
      </div>
    </div>
  </div>
</template>

微信图片_20210707171459.png 现在就是要在app-main布局。

思路

首先设置app-main的高度为calc(100%-84px)(图上写错成了vh请忽略),然后利用flex纵向排列,将筛选条件main-1和分页main-3分别放在顶部和底部,中间table部分main-2自适应。核心就是 main-2作为el-table的父元素,父元素flex,子元素高度设置为100%即可! 。然后关于滚动条,一般会固定表头,只要el-table传入height即可,正常情况下应该不会有表头跟着一起滚动的。

只要在el-table元素中定义了height属性,即可实现固定表头的表格,而不需要额外的代码。

主要代码

Vue

<template>
  <div class="table">
    <div class="wrapper">
      <div class="sidebar">
        <span>左侧菜单</span>  
      </div>
      <div class="main-contanier"> 
        <div class="fixed-header"> 固定头部 </div>
        <section class="app-main">
          <div class="main-1">
            <span>姓名</span>
            <span><el-input></el-input></span>
            <span><el-button>查询</el-button></span>
          </div>
          <div class="main-2">
            <el-table
              height="0"      // 重要点1
              :data="tableData2"
              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 class="main-3">
            <el-pagination
              layout="prev, pager, next"
              :total="1000">
            </el-pagination>
          </div>
        </section>
      </div>
    </div>
  </div>
</template>

css

/deep/ .el-table{
  height: 100% !important; //重要点2
}
.app-main{
  padding-top: 84px;
  height: calc(100% - 84px);
  width: 100%;
  position: relative;
  overflow: hidden;
  background: #cedbf1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .main-2{
    flex: auto ;
    overflow: hidden;//重要点3 在flex元素上再设置个overflex:hidden,表示在该元素内部进行计算
  }
}
.main-1,.main-3{
  display: flex;
  padding: 20px;
  background: white;
}
.main-1{
  margin-bottom: 12px;
}
.main-3{
  margin-top: 12px;
}

微信图片_20210707173935.png

结语

通过简单的css达到效果,Thanks♪(・ω・)ノ