前言
当在做PC端管理系统的时候,总是绕不开报表。当报表单页数据比较多时,就会出现滚动条。这时候产品看不下去了,说不想当前页面的分页按钮还要靠鼠标滚动才能展示出来。辣么这个问题怎么搞嘞?网上有一些解决方法就是通过resize事件去计算高度去赋值,我觉得挺麻烦的,直接用css了。
现象
现在的布局就是这样情况,滚动条滚到底才看的到 el-pagination
。
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>
现在就是要在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;
}
结语
通过简单的css达到效果,Thanks♪(・ω・)ノ