element ui 自带的滚动条使用

在容器的直接外层添加 （需要展现滚动条的那一级）

<el-scrollbar style="height:100%"></el-scrollbar>

如果

注意添加样式  height:100%

另外添加全局的样式

body .el-scrollbar__wrap {

    overflow-x: hidden;

}

实例：

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <!-- import CSS -->

  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <style>

    .el-scrollbar__wrap{

      overflow-x: hidden;

    }

  </style>

</head>

<body>

  <div id="app">

  <div style="height:400px;">

    <el-scrollbar style="height:100%">

        <div style="width:700px;height:700px;border:solid;" >

          ....... blabla.....

        </div>

    </el-scrollbar>

  </div>

  </div>

</body>

  <!-- import Vue before Element -->

  <script src="https://unpkg.com/vue/dist/vue.js"></script>

  <!-- import JavaScript -->

  <script src="https://unpkg.com/element-ui/lib/index.js"></script>

  <script>

    new Vue({

      el: '#app',

      data: function() {

        return { visible: false }

      }

    })

  </script>

</html>

关于element ui滚动条使用的更多相关文章

  1. 基于 vue+element ui 的cdn网站（多页面，都是各种demo）

    前言:这个网站持续更新中...,有网上预览,github上也有源码,喜欢记得star哦,欢迎留言讨论. 网站地址:我的个人vue+element ui demo网站 github地址:yuleGH g ...

  2. 普通element ui table组件的使用

    1.使用基础的element ui 的table的基础使用 首先,使用前要先引用element库到项目中,可以直接引入element的js和css或者在vue项目下按需加载不同的组件 废话不多说,直接 ...

  3. 使用element ui 日期选择器获取值后的格式问题

    一般情况下,我们需要给后台的时间格式是: "yyyy-MM-dd" 但是使用Element ui日期选择器获取的值是这样的: Fri Sep :: GMT+ (中国标准时间) 在官 ...

  4. element ui 1.4 升级到 2.0.11

    公司的框架 选取的是 花裤衩大神开源的 基于 element ui + Vue 的后台管理项目, 项目源码就不公开了,记录 分享下 步骤 1. 卸载 element ui 1.4的依赖包 2. 卸载完 ...

  5. [坑况]饿了么你是这样的前端——vue+element ui 【this dependency was not found：'element-ui/lib/theme-chalk/index.css'】

    element ui 坑况:今日pull代码,潇洒npm run dev ,被告知:this dependency was not found:'element-ui/lib/theme-chalk/ ...

  6. Vue + Element UI项目初始化

    1.安装相关组件 1.1安装Node 检查本地是否安装node node -v 如果没有安装,从Node官网下载 1.2安装npm npm -v 如果没有安装:使用该指令安装: npm install ...

  7. Element UI——本地引入iconfont不显示

    前言 前面因为本地引入Element UI导致了iconfont不显示,所以只好再去Element UI官网去扒下iconfot 步骤 进入官网 组件 | Element UI F12进入控制台,找到 ...

  8. Html | Vue | Element UI——引入使用

    前言 做个项目,需要一个效果刚好Element UI有,就想配合Vue和Element UI,放在tp5.1下使用,但是引入在线的地址各种报错,本地引入就完美的解决了问题! 代码 __STATIC_J ...

  9. 分享一个自搭的框架，使用Spring boot+Vue+Element UI

    废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...

随机推荐

  1. 简易的CRM系统案例之Struts2+Hibernate3+JSP+MySQL版本

    改造上一版本的DAO层 简易的CRM系统案例之Struts2+JSP+MySQL版本 src文件下hibernate.cfg.xml <!DOCTYPE hibernate-configurat ...

  2. Tomcat监听shutdown释放数据库连接池

    开发时因为更新代码,频繁重启Tomcat,遇到一个问题:在执行shutdown脚本后,Tomcat进程没有关闭依然存在(但是HTTP服务已经停止),需要手动执行kill命令才行.查了一些资料结合经验, ...

  3. 26Flutter 日期 和时间戳/格式化日期库/flutter异步/ 官方自带日期组件showDatePicker、时间组件showTimePicker以及国际化

    /* 一.Flutter日期和时间戳 日期转换成时间戳 var now=newDateTime.now(); print(now.millisecondsSinceEpoch); //单位毫秒,13位 ...

  4. java cpu 使用率100%

    --宝典开始 top :查看 进程 ,选CPU使用率高的 获取进程ID,pid top -Hp pid:查看线程,选CPU使用率高的 获取线程ID,threadid printf "%X\n ...

  5. UIScrollView实现自动循环滚动广告

    实现效果如下: 功能说明: 程序运行,图片自动循环播放,采用定时器实现; 当用户用手势触摸滑动时,定时器的自动播放取消,停止触摸时,自动无限播放; 代码如下 : 采用封装视图,外部进行调用即可: 1. ...

  6. react 表单组件 异步渲染，值不会生效，需要手动改变对应组件的显示值

    楼主遇到这个问题已经是第二次,上次我们项目经理给帮忙解决了一次,这次又遇到了,刚开始不知道是这个问题,上次做的笔记也没找到了,估计又忘记了,这里抽三分钟记录一下, 当然这里这样做有个前提:就是你已经和 ...

  7. linux EXT4格式分区扩容

    1.查看现有的分区大小  2.关机增加磁盘大小为100G  3.查看磁盘扩容后状态 lsblk或dh -TH 4.进行分区扩展磁盘,保留根目录的起止位置.  5.删除根分区,不要保存  6.创建分区, ...

  8. 综合练习1，划分vlan，单臂路由，DHCP服务及其限制网段、租期，设置根桥，OSPF路由通告综合练习

    实验要求: 1.在LSW1上分别给vlan10和vlan20做DHCP网段分别为192.168.10.0/24.192.168.20.0/24禁用192.168.10.200-253,192.168. ...

  9. python set集合（16）

    在python变量中除了以前文章所提到的整形int / 浮点数float / 布尔值bool / 列表list / 字典dict 之外,还有一个类型我们还没有做详细介绍,这个变量类型就是集合set. ...

  10. 图解JS

    弱语言 数据类型 隐式转换 弱等于 严格等于 包装对象 字符串转为包装对象 类型检测 表达式 运算符 块 try...catch 对象结构 创建对象,原型链 属性读写 getter,setter 序列 ...