<!-- 弹出框 -->
<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>
参考链接:https://blog.csdn.net/qq_45062261/article/details/97108244