ElementUI

常用组件
（1）Container布局容器（用于页面布局）
（2）Dropdown下拉菜单（用于首页退出菜单）
（3）NavMenu导航菜单（用于左侧菜单）
（4）Tabel表格（用于列表展示）
（5）Pagination分页（用于列表分页展示）
（6）Message消息提示（用于保存、修改、删除的时候成功或失败提示）
（7）Tabs标签页（用于一个页面多个业务功能）
（8）Form表单（新增、修改时的表单，及表单验证）

入门案例：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><!-- import CSS --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"></head><body><div id="app"><el-button @click="fun">Button</el-button><el-dialog :visible.sync="visible" title="Hello world"><p>尚硅谷</p></el-dialog></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: {visible: false },methods:{fun:function(){this.visible = true}}})</script></html>

常用组件

Container 布局容器

用于布局的容器组件，方便快速搭建页面的基本结构：

：外层容器。当子元素中包含或时，全部子元素会垂直上下排列，否则会水平左右排列
：顶栏容器
：侧边栏容器
：主要区域容器
：底栏容器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<!-- 引入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>
<style>.el-header, .el-footer {background-color: #B3C0D1;color: #333;text-align: center;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: 160px;}body > .el-container {margin-bottom: 40px;}.el-container:nth-child(5) .el-aside,.el-container:nth-child(6) .el-aside {line-height: 260px;}.el-container:nth-child(7) .el-aside {line-height: 320px;}
</style>
<body><div id="app"><el-container><el-header>标题</el-header><el-container><el-aside width="200px">菜单</el-aside><el-container><el-main>功能区域</el-main><el-footer>底部</el-footer></el-container></el-container></el-container></div>
</body>
</html>
<script>new Vue({el:"#app"})
</script>

Dropdown 下拉菜单

将动作或菜单折叠到下拉菜单中。
• 方式一：hover激活事件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<!-- 引入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>
<style>.el-dropdown-link {cursor: pointer;color: #409EFF;}.el-icon-arrow-down {font-size: 12px;}
</style>
<body><div id="app"><el-dropdown><span class="el-dropdown-link">下拉菜单<i class="el-icon-arrow-down el-icon--right"></i></span><el-dropdown-menu slot="dropdown"><el-dropdown-item>退出系统</el-dropdown-item><el-dropdown-item disabled>修改密码</el-dropdown-item><el-dropdown-item divided>联系管理员</el-dropdown-item></el-dropdown-menu></el-dropdown></div>
</body>
</html>
<script>new Vue({el:"#app"})
</script>

方式二：click点击事件

//click点击事件
<el-dropdown trigger="click"><span class="el-dropdown-link">下拉菜单<i class="el-icon-arrow-down el-icon--right"></i></span><el-dropdown-menu slot="dropdown"><el-dropdown-item>退出系统</el-dropdown-item><el-dropdown-item disabled>修改密码</el-dropdown-item><el-dropdown-item divided>联系管理员</el-dropdown-item></el-dropdown-menu>
</el-dropdown>
添加：trigger=“click”

方式三：按钮下拉菜单

<el-dropdown split-button trigger="click"><span class="el-dropdown-link">下拉菜单<!--<i class="el-icon-arrow-down el-icon--right"></i>--></span><el-dropdown-menu slot="dropdown"><el-dropdown-item>退出系统</el-dropdown-item><el-dropdown-item disabled>修改密码</el-dropdown-item><el-dropdown-item divided>联系管理员</el-dropdown-item></el-dropdown-menu>
</el-dropdown>
添加：split-button trigger=“click”

NavMenu 导航菜单

为网站提供导航功能的菜单。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<!-- 引入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><body><div id="app"><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></div>
</body>
</html>
<script>new Vue({el:"#app"})
</script>

Table 表格

用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<!-- 引入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><body><div id="app"><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></div>
</body>
</html>
<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:{handleDelete(row){alert(row.date);},handleUpdate(row){alert(row.date);}}});
</script>

Pagination 分页

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<!-- 引入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><body><div id="app"><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><el-pagination @current-change="handleCurrentChange"current-page="5"page-size="10"layout="total, prev, pager, next, jumper":total="305"></el-pagination></div>
</body>
</html>
<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:{handleDelete:function(row){alert(row.date);},handleUpdate:function(row){alert(row.date);},handleCurrentChange(page){alert(page);}}});
</script>

Message 消息提示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<!-- 引入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><body><div id="app"><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></div>
</body>
</html>
<script>new Vue({el:'#app',data:{},methods: {open1() {this.$message('这是一条消息提示');},open2() {this.$message({message: '恭喜你，这是一条成功消息',type: 'success'});},open3() {this.$message({message: '警告哦，这是一条警告消息',type: 'warning'});},open4() {this.$message.error('错了哦，这是一条错误消息');}}});
</script>

Tabs 标签页

分隔内容上有关联但属于不同类别的数据集合。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<!-- 引入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><body><div id="app"><!--通过value属性来指定当前选中的标签页--><h3>卡片化的标签页</h3><el-tabs value="second" 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></div>
</body>
</html>
<script>new Vue({el:'#app'});
</script>

Form 表单

由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<!-- 引入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><body><div id="app"><!--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('form')">立即创建</el-button></el-form-item></el-form></div>
</body>
</html>
<script>new Vue({el:'#app',data:{form: {name: '',region: '',date1: '',date2: '',delivery: false,type: [],resource: '',desc: ''},//定义校验规则rules: {// name对应prop="name"name: [{ required: true, message: '请输入活动名称', trigger: 'blur' },{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }],region: [{ required: true, message: '请选择活动区域', trigger: 'change' }]}},methods:{//validate：对整个表单进行校验的方法，参数为一个回调函数。//该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。// $refs['form']对应el-form ref="form"onSubmit(formName) {this.$refs[formName].validate((valid) => {if (valid) {alert('submit!');} else {console.log('error submit!!');return false;}});},resetForm(formName) {this.$refs[formName].resetFields();}}});
</script>

ElementUI入门相关推荐

Vue05之ElementUI入门+nodejs环境搭建+运行nodejs项目
14天阅读挑战赛努力是为了不平庸~ 目录 1. ElementUI入门 1.1 ElementUI简介 1.2 Vue+ElementUI安装 1.3 开发示例 2. 搭建nodejs环境 2.1 ...
ElementUI入门到入土
1.简介 ElementUI是一套基于VUE2.0的桌面端组件库,ElementUI提供了丰富的组件帮助开发人员快速构建功能强大.风格统一的页面. 官网地址注意ElementUI是基于VUE2.0 ...
最新、最全、含金量最高的Java开发学习资料，爱学习的小伙伴们赶紧狂欢吧！
资料清单: 视频资料: 1.技术大咖最详细JavaScript视频教程 2.技术大咖jquery视频教程 3.技术大咖Bootstrap视频教程 4.技术大咖React+React-router4.x ...
spring boot + vue + element-ui全栈开发入门——基于Electron桌面应用开发
前言 Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Electron通过将Chromium和Node.js合并到同一个运行时环 ...
基于vue-cli、elementUI的Vue超简单入门小例子
基于vue-cli.elementUI的Vue超简单入门小例子这个例子还是比较简单的,独立完成后,能大概知道vue是干嘛的,可以写个todoList的小例子. 开始写例子之前,先对环境的部署做点简单 ...
spring boot + vue + element-ui全栈开发入门
今天想弄弄element-ui 然后就在网上找了个例子感觉还是可以用的第一步是完成了果断拿过来放到我这里这下面直接是连接点进去就可以用啊本想着不用vue 直接导入连接 ...
Element-UI + Vue.js + SpringBoot 实现前后端分离入门项目
Element UI 项目简介与演示刷新页面时让组件默认为当前路由路径删除时确认分页功能的实现 el-date-picke 日期少一天前端部分源码:https://github.com/szl ...
elementUi基础入门学习
elementUi基础入门学习 1.前后端分离(理解) 1.1什么是前后端分离 1.2 前后端分离开发的理解 1.3 为什么要进行前端分离开发: 2 . 先去搭建前端服务 3 elementui 4 ...
elementui 按钮表单_elementUI 学习入门之 Button 按钮
基础按钮用法按钮分为:默认按钮.朴素按钮(plain).圆角按钮(round).圆形按钮(circle).eg: 朴素按钮通过 type 属性指定 primary.success.info.war ...

ElementUI入门

文章目录