关于element-ui的隐藏组件el-scrollbar的使用
2019-05-29 11:06
1916 查看
虽然在官方文档中没有给出这个组件,但是在源码中是有的。所以我们可以直接使用:
<el-scrollbar></el-scrollbar>
但是我们需要微调一下样式,两种情况的演示代码如下:
已知内容高度
<div style='height:800px'> <el-scrollbar class='page-component__scroll'></el-scrollbar> <div> <style> .page-component__scroll{ height: 100%; } .page-component__scroll .el-scrollbar__wrap { overflow-x: auto; } <style>
高度由内容撑开
<html> <body> <div style='height:100%'> <el-scrollbar class='page-component__scroll'></el-scrollbar> <div> </body> </html> <style> html,body{ height:100% overflow:hidden; /*有效防止在页面进行手动刷新时显示内置滚动条*/ } .page-component__scroll{ height: 100%; } .page-component__scroll .el-scrollbar__wrap { overflow-x: auto; } <style>
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:
相关文章推荐
- 关于element-ui中使用el-scrollbar包裹el-tree时横向滚动条不显示的问题
- ElementUI之隐藏Scrollbar 组件的使用
- vue-cli3.0+element-ui上传组件el-upload的使用
- 使用element UI el-upload组件实现视频文件上传及上传进度显示方法总结
- 关于使用element-ui的el-input监听不了回车事件
- 基于vue的滚动条组件之--element隐藏组件滚动条scrollbar使用
- 解决使用elementUI框架el-upload上传组件时session丢失问题
- vue+element ui 使用$refs获取el-dialog 下的 el-table 组件 ,以及使用table多选,默认选中
- 关于element-ui 中使用Notice组件(Message、MessageBox、Notification)所遇到的坑
- VUE 使用 element-ui 的 el-autocomplete 组件实现输入框自动提示查询功能 超简单!!!
- 解决element-ui 中upload组件使用多个时无法绑定对应的元素
- VUE 使用新版本 element-ui 组件库 Select 组件时, value 值为对象时的 BUG 处理
- 使用ElementUI + el-date-picker开发, 报错getTime is not a function
- vue 脚手架搭建新项目以及element-ui等vue组件的使用
- vue2.0 使用element-ui里的upload组件实现图片预览效果方法
- element UI table表格组件使用[超级完整功能]
- vue2.0 使用element-ui里的upload组件实现多图上传。采用FORMDATA的方式上传。
- Element-UI踩坑之Pagination组件的使用
- 基于Vue开发使用element滚动条之el-scrollbar
- elementUI 组件select 一个页面多次使用的情况