問題描述
表格內(nèi)容過多時(shí)顯示滾動(dòng)條：可通過max-height設(shè)置一個(gè)固定的數(shù)值高度實(shí)現(xiàn)，但是項(xiàng)目中的需求是表格的高度不能寫死，要自適應(yīng)高度來顯示滾動(dòng)文章來源地址http://www.zghlxwxcb.cn/news/detail-511632.html
解決方案：
<div class="container">
<!-- 搜索 -->
<div class="search">
<el-form :inline="true">
<el-form-item>
<el-input clearable placeholder="請(qǐng)輸入查找內(nèi)容"></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">
<!-- 注意關(guān)鍵點(diǎn)：el-table 要設(shè)置 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
}
/* 表格容器自動(dòng)撐滿剩余空間 */
.tablesBox {
flex: auto;
overflow: hidden;
.tablesContent {
height: 100%;
width: 100%;
.el-table {
/* 表格高度設(shè)置 */
height: 100% !important;
}
}
}文章來源：http://www.zghlxwxcb.cn/news/detail-511632.html
到了這里，關(guān)于Element-UI el-table高度不固定，自適應(yīng)高度顯示滾動(dòng)條的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
