问题描述
表格内容过多时显示滚动条:可通过
max-height设置一个固定的数值高度实现,但是项目中的需求是表格的高度不能写死,要自适应高度来显示滚动
解决方案:
<div class="container">
<!-- 搜索 -->
<div class="search">
<el-form :inline="true">
<el-form-item>
<el-input clearable placeholder="请输入查找内容"></el-input>
</el-form-item>
<el-form-item>
<el-button size="mini" type="primary">查找</el-button>
</el-form-item>
</el-form>
</div>
<!-- 表格 -->
<div class="tablesBox">
<div class="tablesContent">
<!-- 注意关键点:el-table 要设置 height="0" -->
<el-table :data="tableData" height="0">
<el-table-column prop="date" label="日期" />
<el-table-column prop="name" label="姓名" />
<el-table-column prop="address" label="地址" />
</el-table>
</div>
</div>
</div>
.container {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
}
.search {
height: 70px
}
/* 表格容器自动撑满剩余空间 */
.tablesBox {
flex: auto;
overflow: hidden;
.tablesContent {
height: 100%;
width: 100%;
.el-table {
/* 表格高度设置 */
height: 100% !important;
}
}
}