关于element ui滚动条使用
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滚动条使用的更多相关文章
- 基于 vue+element ui 的cdn网站(多页面,都是各种demo)
前言:这个网站持续更新中...,有网上预览,github上也有源码,喜欢记得star哦,欢迎留言讨论. 网站地址:我的个人vue+element ui demo网站 github地址:yuleGH g ...
- 普通element ui table组件的使用
1.使用基础的element ui 的table的基础使用 首先,使用前要先引用element库到项目中,可以直接引入element的js和css或者在vue项目下按需加载不同的组件 废话不多说,直接 ...
- 使用element ui 日期选择器获取值后的格式问题
一般情况下,我们需要给后台的时间格式是: "yyyy-MM-dd" 但是使用Element ui日期选择器获取的值是这样的: Fri Sep :: GMT+ (中国标准时间) 在官 ...
- element ui 1.4 升级到 2.0.11
公司的框架 选取的是 花裤衩大神开源的 基于 element ui + Vue 的后台管理项目, 项目源码就不公开了,记录 分享下 步骤 1. 卸载 element ui 1.4的依赖包 2. 卸载完 ...
- [坑况]饿了么你是这样的前端——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/ ...
- Vue + Element UI项目初始化
1.安装相关组件 1.1安装Node 检查本地是否安装node node -v 如果没有安装,从Node官网下载 1.2安装npm npm -v 如果没有安装:使用该指令安装: npm install ...
- Element UI——本地引入iconfont不显示
前言 前面因为本地引入Element UI导致了iconfont不显示,所以只好再去Element UI官网去扒下iconfot 步骤 进入官网 组件 | Element UI F12进入控制台,找到 ...
- Html | Vue | Element UI——引入使用
前言 做个项目,需要一个效果刚好Element UI有,就想配合Vue和Element UI,放在tp5.1下使用,但是引入在线的地址各种报错,本地引入就完美的解决了问题! 代码 __STATIC_J ...
- 分享一个自搭的框架,使用Spring boot+Vue+Element UI
废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...
随机推荐
- JSP页面中如何注入Spring容器中的bean
第一步在JSP页面中导入下面的包: <%@page import="org.springframework.web.context.support.WebApplicationCont ...
- ISO/IEC 9899:2011 条款6.4.6——标点符号
6.4.6 标点符号 语法 1.以下之一 [ ] ( ) { } . -> ++ -- & * + - ...
- Flutter布局基本情况总结:
1.一行内容,发布两边: 效果: Flex( direction: Axis.horizontal, children: <Widget>[ Expanded( flex: , child ...
- memcache安装与简单介绍
本文参考自菜鸟教程中的内容. 安装 安装memcache的时候,请切换为root用户 root@centos # wget http://www.memcached.org/files/memcach ...
- 点击链接,取得href的值,但是不转向
点击链接,取得href的值,但是不转向 $('.list a').click(function (e) { e.preventDefault();//取消事件的默认动作. $.ajax({ ...
- Spring 本地事务
主要原理: 事务的顶层接口: PlatformTransactionManager提供了3个方法,在申明式事务中这3个方法都是通过aop 调用的: 1.getTransaction: 进入相关需要被拦 ...
- linux centos7 开启 mysql 3306 端口 外网访问 的实践
第〇步:思路 3306 端口能否被外网访问,主要要考虑: (1)mysql的3306 端口是否开启?是否没有更改端口号? (2)mysql 是否允许3306 被外网访问? (3)linux 是否已经开 ...
- 洛谷 题解 P1908 【逆序对】
一开始竟然妄想用\(n^2\)的算法过这题,然而这是不可能的 所以只好写归并排序来求逆序対惹 比如将下面两个区间排序 3 4 7 9 1 5 8 10 首先将右区间的\(1\)取出,放到\(r_k\) ...
- [学习笔记] Blender 模型编辑-挤出
按TAB键进入模型编辑模式,再次按TAB键退出编辑模式. 或者在菜单按 Modeling 也会进入编辑模式. 进入编辑模式之后,会显示如下额外的工具栏: 下面分别对应点.线.面三种选择方式:选择了两个 ...
- 5年经验Java程序员面试20天
写在前面 今天分享的是一位5年工作经验的Java工程师在帝都的面试经验总结,看看这些互联网公司都爱问些什么题,希望对大家的面试有指导意义. 从事Java开发也有5年经验了,4月初自己的开启面试经历 ...