解决方案:
在表格上添加了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;
}
}