Element-UI-快速入门(极简教程)
文章目录
- 4. ElementUI
- 4.1 ElementUI介绍
- 4.2 常用组件
- 4.2.1 Container 布局容器
- 4.2.2 Dropdown 下拉菜单
- 4.2.3 NavMenu 导航菜单
- 4.2.4 Table 表格
- 4.2.5 Pagination 分页
- 4.2.6 Message 消息提示
- 4.2.7 Tabs 标签页
- 4.2.8 Form 表单
4. ElementUI
4.1 ElementUI介绍
ElementUI是一套基于VUE2.0的桌面端组件库,ElementUI提供了丰富的组件帮助开发人员快速构建功能强大、风格统一的页面。
官网地址:http://element-cn.eleme.io/#/zh-CN
传智健康项目后台系统就是使用ElementUI来构建页面,在页面上引入 js 和 css 文件即可开始使用,如下:
<!-- 引入ElementUI样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入ElementUI组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
4.2 常用组件
4.2.1 Container 布局容器
用于布局的容器组件,方便快速搭建页面的基本结构:
<el-container>
:外层容器。当子元素中包含 <el-header>
或 <el-footer>
时,全部子元素会垂直上下排列,否则会水平左右排列
<el-header>
:顶栏容器
<el-aside>
:侧边栏容器
<el-main>
:主要区域容器
<el-footer>
:底栏容器
<body><div id="app"><el-container><el-header>Header</el-header><el-container><el-aside width="200px">Aside</el-aside><el-container><el-main>Main</el-main><el-footer>Footer</el-footer></el-container></el-container></el-container></div><style>.el-header, .el-footer {background-color: #B3C0D1;color: #333;text-align: left;line-height: 60px;}.el-aside {background-color: #D3DCE6;color: #333;text-align: center;line-height: 200px;}.el-main {background-color: #E9EEF3;color: #333;text-align: center;line-height: 590px;}</style>
</body>
<script>new Vue({el:'#app'});
</script>
4.2.2 Dropdown 下拉菜单
将动作或菜单折叠到下拉菜单中。
<el-dropdown split-button size="small" trigger="click">个人中心<el-dropdown-menu><el-dropdown-item >退出系统</el-dropdown-item><el-dropdown-item divided>修改密码</el-dropdown-item><el-dropdown-item divided>联系管理员</el-dropdown-item></el-dropdown-menu>
</el-dropdown>
4.2.3 NavMenu 导航菜单
为网站提供导航功能的菜单。
<el-menu><el-submenu index="1"><template slot="title"><i class="el-icon-location"></i><span slot="title">导航一</span></template><el-menu-item>选项1</el-menu-item><el-menu-item>选项2</el-menu-item><el-menu-item>选项3</el-menu-item></el-submenu><el-submenu index="2"><template slot="title"><i class="el-icon-menu"></i><span slot="title">导航二</span></template><el-menu-item>选项1</el-menu-item><el-menu-item>选项2</el-menu-item><el-menu-item>选项3</el-menu-item></el-submenu>
</el-menu>
4.2.4 Table 表格
用于展示多条结构类似的数据,可对数据进行排序、筛选、对比或其他自定义操作。
<el-table :data="tableData" stripe><el-table-column prop="date" label="日期"></el-table-column><el-table-column prop="name" label="姓名"></el-table-column><el-table-column prop="address" label="地址"></el-table-column><el-table-column label="操作" align="center"><!--slot-scope:作用域插槽,可以获取表格数据scope:代表表格数据,可以通过scope.row来获取表格当前行数据,scope不是固定写法--><template slot-scope="scope"><el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button><el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button></template></el-table-column>
</el-table>
<script>new Vue({el:'#app',data:{tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'}]},methods:{handleUpdate(row){alert(row.date);},handleDelete(row){alert(row.date);}}});
</script>
4.2.5 Pagination 分页
当数据量过多时,使用分页分解数据。
<!--current-change:内置的事件,当前页码改变时会触发,可以获取到改变之后的页码
-->
<el-pagination@current-change="handleCurrentChange"current-page="5"page-size="10"layout="total, prev, pager, next, jumper":total="305">
</el-pagination>
<script>new Vue({el:'#app',methods:{handleCurrentChange(page){alert(page);}}});
</script>
4.2.6 Message 消息提示
常用于主动操作后的反馈提示。
<el-button :plain="true" @click="open1">消息</el-button>
<el-button :plain="true" @click="open2">成功</el-button>
<el-button :plain="true" @click="open3">警告</el-button>
<el-button :plain="true" @click="open4">错误</el-button>
<script>new Vue({el: '#app',methods: {open1() {this.$message('这是一条消息提示');},open2() {this.$message({message: '恭喜你,这是一条成功消息',type: 'success'});},open3() {this.$message({message: '警告哦,这是一条警告消息',type: 'warning'});},open4() {this.$message.error('错了哦,这是一条错误消息');}}})
</script>
4.2.7 Tabs 标签页
分隔内容上有关联但属于不同类别的数据集合。
<h3>基础的、简洁的标签页</h3>
<!--通过value属性来指定当前选中的标签页
-->
<el-tabs value="first"><el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane><el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane><el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane><el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
</el-tabs>
<h3>选项卡样式的标签页</h3>
<el-tabs value="first" type="card"><el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane><el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane><el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane><el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
</el-tabs>
<h3>卡片化的标签页</h3>
<el-tabs value="first" type="border-card"><el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane><el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane><el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane><el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
</el-tabs>
<script>new Vue({el: '#app'})
</script>
4.2.8 Form 表单
由输入框、选择器、单选框、多选框等控件组成,用以收集、校验、提交数据。在 Form 组件中,每一个表单域由一个 Form-Item 组件构成,表单域中可以放置各种类型的表单控件,包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker。
<!--rules:表单验证规则
-->
<el-form ref="form" :model="form" :rules="rules" label-width="80px"><!--prop:表单域 model 字段,在使用 validate、resetFields 方法的情况下,该属性是必填的--><el-form-item label="活动名称" prop="name"><el-input v-model="form.name"></el-input></el-form-item><el-form-item label="活动区域" prop="region"><el-select v-model="form.region" placeholder="请选择活动区域"><el-option label="区域一" value="shanghai"></el-option><el-option label="区域二" value="beijing"></el-option></el-select></el-form-item><el-form-item label="活动时间"><el-col :span="11"><el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker></el-col><el-col class="line" :span="2">-</el-col><el-col :span="11"><el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker></el-col></el-form-item><el-form-item label="即时配送"><el-switch v-model="form.delivery"></el-switch></el-form-item><el-form-item label="活动性质"><el-checkbox-group v-model="form.type"><el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox><el-checkbox label="地推活动" name="type"></el-checkbox><el-checkbox label="线下主题活动" name="type"></el-checkbox><el-checkbox label="单纯品牌曝光" name="type"></el-checkbox></el-checkbox-group></el-form-item><el-form-item label="特殊资源"><el-radio-group v-model="form.resource"><el-radio label="线上品牌商赞助"></el-radio><el-radio label="线下场地免费"></el-radio></el-radio-group></el-form-item><el-form-item label="活动形式"><el-input type="textarea" v-model="form.desc"></el-input></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">立即创建</el-button></el-form-item>
</el-form>
<script>new Vue({el: '#app',data:{form: {name: '',region: '',date1: '',date2: '',delivery: false,type: [],resource: '',desc: ''},//定义校验规则rules: {name: [{ required: true, message: '请输入活动名称', trigger: 'blur' },{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }],region: [{ required: true, message: '请选择活动区域', trigger: 'change' }]}},methods:{onSubmit() {console.log(this.form);//validate:对整个表单进行校验的方法,参数为一个回调函数。//该回调函数会在校验结束后被调用,并传入两个参数:是否校验成功和未通过校验的字段。this.$refs['form'].validate((valid) => {if (valid) {alert('submit!');} else {console.log('error submit!!');return false;}});}}})
</script>
Element-UI-快速入门(极简教程)相关推荐
- 深度学习入门极简教程(二)
深度学习入门极简教程(二) 摘要: 现在的人工智能,大致就是用"硅基大脑"模拟或重现"碳基大脑的过程".那么,在未来会不会出现"碳硅合一"的 ...
- Qt入门极简教程(二)
<QMainWindow_菜单栏和工具栏> QMainWindow:菜单栏(menu bar).多个工具栏(tool bars).多个铆接部件(浮动窗口dock widgets).中心部件 ...
- 第1讲 快速入门 《Kotlin 极简教程 》
第1讲 快速入门 <Kotlin 极简教程 > 投影片01.jpg 投影片02.jpg 投影片03.jpg 投影片04.jpg 投影片05.jpg 投影片06.jpg 投影片07.jpg ...
- 《Kotin 极简教程》第13章 使用 Kotlin 和 Anko 的Android 开发
第13章 使用 Kotlin 和 Anko 的Android 开发 最新上架!!!< Kotlin极简教程> 陈光剑 (机械工业出版社) 可直接打开京东,淘宝,当当===> 搜索: ...
- 《React极简教程》第一章 Hello,World!
react React 是一个用于构建用户界面的 JAVASCRIPT 库. React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图). React 起源于 Facebook ...
- 《 Kotlin极简教程 》陈光剑 编著(机械工业出版社,2017.9)
<Kotlin极简教程> 点击这里 > 去京东商城购买阅读 点击这里 > 去天猫商城购买阅读 正式预售: < Kotlin极简教程 > image.png imag ...
- Kotlin极简教程
目录 Kotlin极简教程 前言 视频教程 Kotlin 系统入门到进阶 Kotlin 从入门到放弃 Kotlin 从零基础到进阶 第1章 Kotlin简介 第2章 快速开始:HelloWorld 第 ...
- 《Kotlin 极简教程 》第5章 集合类
<Kotlin 极简教程 >第5章 集合类 <Kotlin极简教程>正式上架: 点击这里 > 去京东商城购买阅读 点击这里 > 去天猫商城购买阅读 非常感谢您亲爱的 ...
- 最新上架!!!《 Kotlin极简教程》 陈光剑 (机械工业出版社)
<Kotlin极简教程>正式上架: 点击这里 > 去京东商城购买阅读 点击这里 > 去天猫商城购买阅读 非常感谢您亲爱的读者,大家请多支持!!!有任何问题,欢迎随时与我交流~ ...
- 【编程实践】Google Guava 极简教程
前言 Guava 工程包含了若干被 Google 的 Java 项目广泛依赖 的核心库,我们希望通过此文档为 Guava 中最流行和最强大的功能,提供更具可读性和解释性的说明. 适用人群 本教程是基础 ...
最新文章
- Spring2.5+MINA2搭建Socket Server
- nginx、fastCGI、php-fpm关系梳理(转载参考)
- 校园网服务器系统需求分析,校园网的网络系统集成建设需求分析的主要工作
- Jira 6.0.5的详细安装及汉化授权
- notepad++ c语言编译,Notepad++編譯和運行C語言 (GCC)
- 合并两个有序链表,合并后依然有序(C语言)
- nw.js 打包换桌面图标_我如何使用CometChat和NW.js构建桌面聊天应用程序(以及方法)
- 转载-使用Nodepad++来编辑我们服务器的配置文件
- EditPlus配置Python环境
- 想拿高工资?那些年Java面试官常问的知识点项目实战
- (二)可变分区存储管理方案中的内存分配
- java 乱码 号处理器_java处理中日文字符串的乱码问题
- php 框架_八大PHP开源框架(PHP开发必藏哟)
- 车内看车头正不正技巧_交规理论最全技巧口诀,学会后100%过关!
- Python实现遗传算法解决TSP问题
- 个人风景网站模板HTML+CSS+JS(源码)
- 服务器系统日志保留时间设置,服务器行为操作日志
- (十一:2020.08.28)CVPR 2017 追踪之论文纲要(译)
- 为了忘却的纪念---番茄花园 Windows XP 下载地址合集
- UVM virtual interface errors
热门文章
- LeetCode 988. 从叶结点开始的最小字符串(DFS)
- LeetCode 1236. 网络爬虫(BFS/DFS)
- LeetCode 870. 优势洗牌(贪心 二分查找)
- LeetCode 1038. 从二叉搜索树到更大和树(逆中序-右根左-降序)
- Tensorflow线程队列与IO操作
- 预训练模型对实体的表示能力差?一个简单有效的解法来了!(开源)
- 阿里架构师进阶23期精讲:Redis、Kafka、Dubbo、Docker等
- Android官方开发文档Training系列课程中文版:布局性能优化之布局复用
- 委托、Lambda表达式、事件系列07,使用EventHandler委托
- spoj839 Optimal Marks(最小割,dinic)