例如 在一个弹出框的表格添加滚动条
<!-- 弹出框 --> <el-dialog :title="title" :visible.sync="dialogVisible" width="50%" center :close-on-click-modal=false><div style="height:500px;" class="scrollbar">//控制显示区域的高度<el-scrollbar style="height:100%"> //element-ui组件<el-table :data="regionList" stripe style="width: 100%" border :span-method="objectSpanMethod2" ><el-table-column align="center" prop="regionName" label="区域" width="180"></el-table-column><el-table-column align="center" prop="username" label="姓名"></el-table-column><el-table-column align="center" prop="phone" label="联系电话"></el-table-column><el-table-column prop="deptName" align="center" label="部门"></el-table-column><el-table-column prop="dutyType" align="center" label="值守岗位"></el-table-column></el-table></el-scrollbar></div></el-dialog>
<style lang="less"scoped> /deep/ .scrollbar {white-space: nowrap;//强制一行显示(看需要).el-scrollbar {display: flex;justify-content: space-around;padding: 0 10px;} /deep/ .el-scrollbar__wrap {// 必要的overflow: scroll; width: 110%;//隐藏侧边默认滚动条 (达不到效果可以自己试着微调) 如解决不了可尝试用 `margin-right -60px`height: 100%;//隐藏底部滚动条(100%如果达不到效果可以试着用110%) }}</style>