element-ui 添加滚动条
2022-10-08 17:22:18
406
{{single.collect_count}}

例如 在一个弹出框的表格添加滚动条

<!-- 弹出框 --> <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>
回帖
全部回帖({{commentCount}})
{{item.user.nickname}} {{item.user.group_title}} {{item.friend_time}}
{{item.content}}
{{item.comment_content_show ? '取消' : '回复'}} 删除
回帖
{{reply.user.nickname}} {{reply.user.group_title}} {{reply.friend_time}}
{{reply.content}}
{{reply.comment_content_show ? '取消' : '回复'}} 删除
回帖
收起
没有更多啦~
{{commentLoading ? '加载中...' : '查看更多评论'}}