改变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组件原来的源码进行削减,源码点击这里下载.本文只对重要的代码片段进行讲解,推荐下载代码把项目运行起来,跟着文章 ...
随机推荐
- python3使用web.py遇到的找不属性的错误解决
今天用pyhon安装完web.py的时候,点击运行还是没错的,但是在网页输入链接就会报错.1.安装我是这样的: pip install web.py 2.运行后错误信息是这样: AttributeEr ...
- C基础 内存越界和内存监测的简单处理
引言 突然感觉要出去走走了, 醒了后 刷完牙就在联系coding, 不知不觉到了 黄昏. 看看天, 打开灯. 又感觉到了 夜夜夜夜 . 13年到北京务工, 遇到一批批NB的同龄人物. 一块工作, 一块 ...
- SQL 列 转换成 查询出来的 行
查询 每个学生 的 (姓名,语文,数学,英语,成绩)为列 表结构如下: student: 学生表 grade 成绩表 : 查询出如下效果: SQL如下: select s.name,a.* fro ...
- leetcode 之Linked List Cycle(24)
两个思路,一是用哈希表记录每个结点是还被访问过:二是定义两个快.慢指针,如果存在环的话,两个指针必定会在某位结点相遇. bool linkListNode(ListNode *head) { List ...
- 算法入门系列2:k近邻算法
用官方的话来说,所谓K近邻算法(k-Nearest Neighbor,KNN),即是给定一个训练数据集,对新的输入实例,在训练数据集中找到与该实例最邻近的K个实例(也就是上面所说的K个邻居), 这K个 ...
- Word Search——经典题(还没细看)
Given a 2D board and a word, find if the word exists in the grid. The word can be constructed from l ...
- Java学习笔记(九)——javabean
[前面的话] 实际项目在用spring框架结合dubbo框架做一个系统,虽然也负责了一块内容,但是自己的能力还是不足,所以还需要好好学习一下基础知识,然后做一些笔记.自己的自学能力还是显得不够好,每次 ...
- 关于自建yum源拾遗
yum参数解释[updates]--->源name=CentOS-$releasever - Updates --->源的名字baseurl=http://mirror.centos.or ...
- 【剑指offer】面试题 49. 丑数
面试题 49. 丑数 题目描述 题目:把只包含因子2.3和5的数称作丑数(Ugly Number).例如6.8都是丑数,但14不是,因为它包含因子7. 习惯上我们把1当做是第一个丑数.求按从小到大的顺 ...
- POJ1845 Sumdiv [数论,逆元]
题目传送门 Sumdiv Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 26041 Accepted: 6430 Des ...