改变element-ui滚动条设置,
基于vue的滚动条组件之--element隐藏组件滚动条scrollbar使用
在项目中,总是需要用到滚动条,但windows浏览器默认的滚动条是很丑的,为了页面美观,可以考虑优化滚动条样式。
vue Element UI官方文档上并没有放出滚动条相关的示例说明,但是实际上是有这么一个组件的,可查看源码。
<el-scrollbar></el-scrollbar>
将会出现滚动的内容放到上述标签内就可以了。
这里要简单的设置一下,将标签的height设为100%,查看效果的时候,会出现一个横向的滚动条,如果你不想要横向的滚动条,使用下面css属性设置就可以只显示竖向滚动条。
.el-scrollbar__wrap {
overflow-x: hidden;
}
示例使用方法如下:

改变element-ui滚动条设置,的更多相关文章
- 关于element ui滚动条使用
element ui 自带的滚动条使用 在容器的直接外层添加 (需要展现滚动条的那一级) <el-scrollbar style="height:100%"></ ...
- element ui datePicker 设置当前日期之前的日期不可选
pickerOptions0: { disabledDate(time) { return time.getTime() < Date.now() - 8.64e7 } },
- element ui设置表格表头高度和每一行的高度
填坑记录:今天用element ui的表格组件做用户信息展示,直接拉取的官网的代码过来,发现表头和每一行都太高了,如下: 因为第一次使用element ui的表格组件,不太清楚会遇到这样的坑,以为能轻 ...
- element UI表格行高、padding等设置报错问题
element UI里面表格的行高需要自己调整高度和设置padding,直接写style是不行的,里面有 : 1.row-style (行的 style) 2.header-row-styl (表 ...
- vue-cli脚手架引入element UI的正确打开方式
element UI官网教程:http://element-cn.eleme.io/#/zh-CN/component/quickstart 1.完整引入,直接了当,但是组件文件不是按需加载,造成多余 ...
- 【Element UI】使用问题记录
[Element UI]使用问题记录 转载:https://www.cnblogs.com/yangchongxing/p/10750994.html 下载地址: https://unpkg.com/ ...
- 普通element ui table组件的使用
1.使用基础的element ui 的table的基础使用 首先,使用前要先引用element库到项目中,可以直接引入element的js和css或者在vue项目下按需加载不同的组件 废话不多说,直接 ...
- vue加scoped后无法修改样式(无法修改element UI 样式)
有的时候element提供的默认的样式不能满足项目的需要,就需要我们队标签的样式进行修改,但是发现修改的样式不起作用 第一种方法 原因:scoped 解决方法:去掉scoped 注意:此时该样式会污染 ...
- Element UI table组件源码分析
本文章从如下图所示的最基本的table入手,分析table组件源代码.本人已经对table组件原来的源码进行削减,源码点击这里下载.本文只对重要的代码片段进行讲解,推荐下载代码把项目运行起来,跟着文章 ...
随机推荐
- Win10打开照片提示“无效的注册表值”解决方法
1.点开开始菜单,右键单击,选择“以管理员运行”[键盘win键+R]输入PowerShell. 2.输入Get-AppxPackage *photo* | Remove-AppxPackage后回车. ...
- (转)函数后面加const--C++ const成员函数
类的成员函数后面加 const,表明这个函数不会对这个类对象的数据成员(准确地说是非静态数据成员)作任何改变. 在设计类的时候,一个原则就是对于不改变数据成员的成员函数都要在后面加 const,而对于 ...
- jQuery Mobile + HTML5 获取地理位置信息
这个代码也非常简单,核心是HTML5中GeoLocation API,函数原型定义如下: void getCurrentPosition(in PositionCallback successCa ...
- 分割线用CSS样式做出来的效果
一:单个标签实现分隔线:. ; ; line-height: 1px; border-left: 200px solid #ddd; border-right: 200px solid #ddd; t ...
- linux命令(44):date命令
1.命令格式: date [参数]... [+格式] 2.命令功能: date 可以用来显示或设定系统的日期与时间. 3.命令参数: 必要参数: %H 小时(以00-23来表示). %I 小时(以01 ...
- 【JBPM4】EL表达式的使用,实现JAVA与JPDL的交互
user.java实体类 private String kezhang; private String zhuren; /...完善set get 方法.../ 创建流程实例 //创建流程引擎 Pro ...
- VS2013 打开项目时提示This project is incompatible with the current edition Visual Studio.
刚安装完成了Visual Studio 2013后,打开项目时,遇到以下问题 解决方法:在Visual Studio 2013 的菜单中打开“Tools",并打开“Extensions an ...
- 《深入理解Android2》读书笔记(二)
接之前那篇<深入理解Android2>读书笔记(一) 下面几篇来分别详细分析 Binder类作为服务端的Bn的代表,BinderProxy类作为客户端的Bp的代表,BinderIntern ...
- (8)go 字符串
内建函数在 包中 1. len(str) 计算长度,中文占3个字符 2.字符串遍历,同时处理中文 package main import ( "fmt" ) func main() ...
- HRBUST 1212 乘积最大
$dp$,大数运算. $dp[i][j]$表示到$i$位置切成了$j$段的最大收益.数字爆$longlong$,$Java$上大数. import java.math.BigInteger; impo ...