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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/482612.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

centos 6.5 防火墙开放指定端口

清除防火墙规则&#xff1a;iptables -F 关闭防火墙 /etc/init.d/iptables stop 关闭防火墙开机自启&#xff1a;chkconfig iptables off 查看iptables 是否开启&#xff1a;Chkconfig –list | grep iptables iptables 0:关闭 1:关闭 2:启用 3:关闭 4:启用 5:关闭 6:关…

破解人工智能系统的四种攻击方法!

来源&#xff1a;未来科技前沿没有人喜欢早上起床&#xff0c;但现在人工智能驱动的算法可以设置我们的闹钟、管理我们家中的温度设置以及选择适合我们心情的播放列表&#xff0c;贪睡按钮的使用越来越少。人工智能安全辅助系统使我们的车辆更安全&#xff0c;人工智能算法优化…

PowerDesigner-快速入门(极简教程)

文章目录3. PowerDesigner3.1 PowerDesigner介绍3.2 PowerDesigner使用3.2.1 创建物理数据模型3.2.2 从PDM导出SQL脚本3.2.3 逆向工程3.2.4 生成数据库报表文件3. PowerDesigner 3.1 PowerDesigner介绍 PowerDesigner是Sybase公司的一款软件&#xff0c;使用它可以方便地对系…

关于dev无法更新、调试的问题

转载于:https://www.cnblogs.com/IcefishBingqing/p/5109876.html

MIT发布白皮书:美国欲重返世界半导体霸主!

来源&#xff1a;新智元编辑&#xff1a;时光 David近年来&#xff0c;全球芯片的持续性短缺已引发了一连串的产能瓶颈问题。各种消费品的价格都随着「缺芯」而上升&#xff0c;从CPU到显卡&#xff0c;从智能冰箱到SUV&#xff0c;这凸显出半导体在日常生活种所扮演的重要作用…

dubbo-快速入门-分布式RPC框架Apache Dubbo

文章目录分布式RPC框架Apache Dubbo1. 软件架构的演进过程1.1 单体架构1.2 垂直架构1.3 SOA架构1.4 微服务架构2. Apache Dubbo概述2.1 Dubbo简介2.2 Dubbo架构3. 服务注册中心Zookeeper3.1 Zookeeper介绍3.2 安装Zookeeper3.3 启动、停止Zookeeper4. Dubbo快速入门4.1 服务提供…

mysql数据库之忘记root密码

1. vi /etc/my.cnf&#xff0c;在[mysqld]中添加 skip-grant-tables 例如&#xff1a; [mysqld] skip-grant-tables datadir/var/lib/mysql socket/var/lib/mysql/mysql.sock 2. 重启mysql service mysql restart 3. 使用用户无密码登录 mysql -uroot -p (直接点击回车&…

可构建AI的“AI”诞生:几分之一秒内,就能预测新网络的参数

来源&#xff1a;学术头条 作者&#xff1a;Anil Ananthaswamy译者&#xff1a;刘媛媛原文出处&#xff1a;quantamagazine.org人工智能在很大程度上是一场数字游戏。当深度神经网络在 10 年前开始超越传统算法&#xff0c;是因为我们终于有了足够的数据和处理能力来充分利用它…

linux-01-概述

文章目录入门概述走近Linux系统入门概述 我们为什么要学习Linux linux诞生了这么多年&#xff0c;以前还喊着如何能取代windows系统&#xff0c;现在这个口号已经小多了&#xff0c;任何事物发展都有其局限性都有其天花板。就如同在国内再搞一个社交软件取代腾讯一样&#xff0…

MySQL-Front的安装简介

本博文在作者的个人网站、博客园和CSDN同步发表&#xff0c;如要转载&#xff0c;请标明原作者和出处。 最近在学习MySQL数据库&#xff0c;开始的时候使用的Windows的命令行进行最基本的代码的输入&#xff0c;可是后来就觉得比较麻烦了&#xff0c;于是想找一款图形化数…

生命是什么?生物化学、物理学、哲学对生命本源的共同探索

来源&#xff1a; 集智俱乐部作者&#xff1a;Mark A. Bedua译者&#xff1a;宋词、范星辰 审校&#xff1a;周理乾、梁金编辑&#xff1a;邓一雪导语地球上充盈着生命&#xff0c;通常我们很容易分辨哪些是生命&#xff0c;哪些不是生命。可是&#xff0c;关于生命是什么&…

linux-02-常用的命令-必须掌握

文章目录目录管理基本属性文件内容查看目录管理 绝对路径和相对路径 我们知道Linux的目录结构为树状结构&#xff0c;最顶级的目录为根目录 /。 其他目录通过挂载可以将它们添加到树中&#xff0c;通过解除挂载可以移除它们。 在开始本教程前我们需要先知道什么是绝对路径与相…

上交大许志钦:神经网络中的奥卡姆剃刀——简单有效原理

来源&#xff1a; 智源社区作者&#xff1a;许志钦整理&#xff1a;熊宇轩编辑&#xff1a;李梦佳本文整理自青源Talk第十期&#xff0c;视频回看地址&#xff1a;https://event.baai.ac.cn/activities/217【专栏&#xff1a;研究思路】奥卡姆剃刀是由14世纪方济会修士奥卡姆的…

CSS每日学习笔记(3)

8.1.2019 1.CSS伪类&#xff1a;用于向某些选择器添加特殊的效果。 伪类的语法&#xff1a; selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用。 a.red : visited {color: #FF0000} <a class"red" href"css_syntax.asp">CSS Syn…

linux-03-Vim使用+账号用户管理

什么是Vim编辑器 Vim是从 vi 发展出来的一个文本编辑器。代码补完、编译及错误跳转等方便编程的功能特别丰富&#xff0c;在程序员中被广泛使用。 简单的来说&#xff0c; vi 是老式的字处理器&#xff0c;不过功能已经很齐全了&#xff0c;但是还是有可以进步的地方。 vim 则…

孙正义:未来30年投资趋势【附PPT】

来源&#xff1a;投资家、蓝血研究&#xff08;lanxueyanjiu)作者&#xff1a;孙正义对于今后30年来讲&#xff0c;我认为现在是个很关键的时刻&#xff0c;尤其是在各位的人生当中。而且现在是一整个概念的转变&#xff0c;我们要包容这个概念的转变。我想先给大家看两张照片。…

php 计算指定年份的周总数与及第几周的开始日期和结束日期(从周一开始)

/** * 获取某年第几周的开始日期和结束日期 * param int $year * param int $week 第几周; */ public function weekday($year,$week1){ $year_start mktime(0,0,0,1,1,$year); $year_end mktime(0,0,0,12,31,$year); // 判断第一天是否为第一周的开始 if (intval(d…

linux-04-磁盘命令+进程命令

磁盘管理 概述 Linux磁盘管理好坏直接关系到整个系统的性能问题。 Linux磁盘管理常用命令为 df、du。 df &#xff1a;列出文件系统的整体磁盘使用量du&#xff1a;检查磁盘空间使用量 df df df命令参数功能&#xff1a;检查文件系统的磁盘空间占用情况。可以利用该命令来获…

华人一作统一「视觉-语言」理解与生成:一键生成图像标注,完成视觉问答,Demo可玩...

来源&#xff1a;机器学习研究组订阅这个 BLIP 模型可以「看图说话」&#xff0c;提取图像的主要内容&#xff0c;不仅如此&#xff0c;它还能回答你提出的关于图像的问题。视觉 - 语言预训练 (Vision-Language Pre-training&#xff0c;VLP) 提高了许多视觉 - 语言任务的性能。…

如何做一名优秀的电子工程师[zz]

如何做一名优秀的电子工程师成为一个杰出工程师最重要的因素就是“热爱自己的职业”。毕竟兴趣是最好的老师&#xff0c;许多优秀的电子工程师都是从小作为电子爱好者的。爱好不仅要体现在行动中 更要深入内心甚至深入骨髓。作为工程师和科学家想取得成功并不是比赛谁花的时间最…