解决方案:
在表格上添加了style="height: px;"
和:max-height=""
,这两个设置共同作用使表格在内容超过 设定高度时显示滚动条配合css使用
高度值可根据实际需求调整
<el-table :data="biddData" style="width: 100%; margin-top: 10px; height: 900px;" row-key="id" :border="false" lazy :tree-props="{children: 'children', hasChildren: 'hasChildren'}" class="horizontal-line-table table-scroll" :header-cell-style="{background:'#42b983', color: '#ffffff'}" @selection-change="handleSelectionChange" ref="multipleTable" :max-height="900"> <el-table-column type="selection" align="center" width="50"> </el-table-column> <el-table-column prop="mlname" label="名称" width="300"> <template slot-scope="scope"> <el-button v-if="scope.row.filecode === '1'" type="text" @click="handleClick(scope.row)"> {{ scope.row.mlname }} </el-button> <span v-else>{{ scope.row.mlname }}</span> </template> </el-table-column> <el-table-column prop="filetype" align="center" label="文件分类"> </el-table-column> <el-table-column prop="createtime" align="center" label="上传日期"> </el-table-column> </el-table>
/* 表格滚动样式 */ .table-scroll { .el-table__body-wrapper { overflow-y: auto; /* 垂直滚动 */ max-height: 900px; /* 与表格max-height保持一致 */ /* 滚动条美化 (可选) */ &::-webkit-scrollbar { width: 6px; } &::-webkit-scrollbar-thumb { background-color: #ccc; border-radius: 3px; } &::-webkit-scrollbar-track { background-color: #f5f5f5; } } /* 处理树形表格展开图标对齐问题 */ .el-table__expand-column { vertical-align: middle !important; } }