解決方案:
?
在表格上添加了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-columntype="selection"align="center"width="50"> </el-table-column> <el-table-columnprop="mlname"label="名稱"width="300"><template slot-scope="scope"><el-buttonv-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-columnprop="filetype"align="center"label="文件分類"> </el-table-column> <el-table-columnprop="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;} }