vue+elementUI实现固定table超过设定高度显示下拉条

解决方案:

在表格上添加了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;
  }
}
相关推荐
vayy3 分钟前
uniapp中 ios端 scroll-view 组件内部子元素z-index失效问题
前端·ios·微信小程序·uni-app
专注API从业者23 分钟前
基于 Node.js 的淘宝 API 接口开发:快速构建异步数据采集服务
大数据·前端·数据库·数据挖掘·node.js
前端无冕之王25 分钟前
一份兼容多端的HTML邮件模板实践与详解
前端·css·数据库·html
再学一点就睡2 小时前
深入理解 Redux:从手写核心到现代实践(附 RTK 衔接)
前端·redux
天天进步20153 小时前
从零到一:现代化充电桩App的React前端参考
前端·react.js·前端框架
柯南二号3 小时前
【大前端】React Native Flex 布局详解
前端·react native·react.js
龙在天4 小时前
npm run dev 做了什么❓小白也能看懂
前端
hellokai4 小时前
React Native新架构源码分析
android·前端·react native
li理5 小时前
鸿蒙应用开发完全指南:深度解析UIAbility、页面与导航的生命周期
前端·harmonyos
去伪存真5 小时前
因为rolldown-vite比vite打包速度快, 所以必须把rolldown-vite在项目中用起来🤺
前端