问题描述
表格内容过多时显示滚动条：可通过max-height设置一个固定的数值高度实现，但是项目中的需求是表格的高度不能写死，要自适应高度来显示滚动文章来源地址https://www.toymoban.com/news/detail-511632.html
解决方案：
<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;
}
}
}文章来源：https://www.toymoban.com/news/detail-511632.html
到了这里，关于Element-UI el-table高度不固定，自适应高度显示滚动条的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
