ElementUI
一、介绍
Element UI是饿了么团队精心打造的一款基于 Vue.js 的桌面端组件库，为开发者提供了一系列丰富、实用且美观的 UI 组件 ，极大地简化了前端开发流程，提高了开发效率。
随着 Vue.js 的广泛应用，ElementUI 凭借其与 Vue.js 的无缝集成，迅速在前端开发社区中崭露头角，成为众多项目中不可或缺的一部分，无论是小型的个人项目，还是大型的企业级应用，ElementUI 都能发挥其独特的优势，助力开发者打造出高品质的用户界面。
ElementUI是一个UI库，它不依赖于vue。是和vue配合使用做项目开发的一个比较好的UI框架。
二、安装Element UI
1. npm 安装
推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。
npm i element-ui -S
2. CDN
目前可以通过 unpkg.com/element-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。
<!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 引入组件库 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script>
通过 CDN 的方式我们可以很容易地使用 Element 写出一个 Hello world 页面。
<!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="visible = true">Button</el-button><el-dialog :visible.sync="visible" title="Hello world"><p>Try Element</p></el-dialog></div> </body><!-- import Vue before Element --><script src="https://unpkg.com/vue@2/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>
访问此html页面，默认只展示一个button按钮，点击按钮弹出Hello world对话框：
三、常用组件
1. Container 布局容器
用于布局的容器组件，方便快速搭建页面的基本结构：
<el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。 <el-header>：顶栏容器。 <el-aside>：侧边栏容器。 <el-main>：主要区域容器。 <el-footer>：底栏容器。
以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。此外，<el-container> 的子元素只能是后四者，后四者的父元素也只能是 <el-container>。
container.html：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!-- 引入ElementUI样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><script src="https://unpkg.com/vue@2/dist/vue.js"></script><!-- 引入ElementUI组件库 --><script src="https://unpkg.com/element-ui/lib/index.js"></script> </head> <body> <div id="app"><el-container><el-header>header部分</el-header></el-container><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> </div> <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: 590px;} </style> <script>new Vue({el:'#app'}); </script> </body> </html>
访问html页面，效果：
2. Dropdown 下拉菜单
将动作或菜单折叠到下拉菜单中。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!-- 引入ElementUI样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><script src="https://unpkg.com/vue@2/dist/vue.js"></script><!-- 引入ElementUI组件库 --><script src="https://unpkg.com/element-ui/lib/index.js"></script> </head> <body><div id="app"><el-dropdown split-button type="primary">默认尺寸<el-dropdown-menu slot="dropdown"><el-dropdown-item>黄金糕</el-dropdown-item><el-dropdown-item>狮子头</el-dropdown-item><el-dropdown-item>螺蛳粉</el-dropdown-item><el-dropdown-item>双皮奶</el-dropdown-item><el-dropdown-item>蚵仔煎</el-dropdown-item></el-dropdown-menu></el-dropdown><el-dropdown size="medium" split-button type="primary">中等尺寸<el-dropdown-menu slot="dropdown"><el-dropdown-item>黄金糕</el-dropdown-item><el-dropdown-item>狮子头</el-dropdown-item><el-dropdown-item>螺蛳粉</el-dropdown-item><el-dropdown-item>双皮奶</el-dropdown-item><el-dropdown-item>蚵仔煎</el-dropdown-item></el-dropdown-menu></el-dropdown><el-dropdown><el-button type="primary">小型尺寸<i class="el-icon-arrow-down el-icon--right" ></i></el-button><el-dropdown-menu slot="dropdown"><el-dropdown-item>黄金糕</el-dropdown-item><!--分隔线divided--><el-dropdown-item divided>狮子头</el-dropdown-item><el-dropdown-item>螺蛳粉</el-dropdown-item><el-dropdown-item>双皮奶</el-dropdown-item><el-dropdown-item>蚵仔煎</el-dropdown-item></el-dropdown-menu></el-dropdown><el-dropdown size="mini" split-button type="primary" trigger="click">超小尺寸<el-dropdown-menu slot="dropdown"><el-dropdown-item>黄金糕</el-dropdown-item><el-dropdown-item>狮子头</el-dropdown-item><el-dropdown-item>螺蛳粉</el-dropdown-item><el-dropdown-item disabled>双皮奶</el-dropdown-item><el-dropdown-item>蚵仔煎</el-dropdown-item></el-dropdown-menu></el-dropdown></div><script>new Vue({el:'#app'});</script> </body> </html>
访问页面，效果：
3. NavMenu 导航菜单
为网站提供导航功能的菜单。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!-- 引入ElementUI样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><script src="https://unpkg.com/vue@2/dist/vue.js"></script><!-- 引入ElementUI组件库 --><script src="https://unpkg.com/element-ui/lib/index.js"></script> </head> <body><div id="app"><el-menu default-active="4"><el-submenu index="1"><template slot="title"><i class="el-icon-location"></i><span slot="title">导肮一</span></template><el-menu-item index="2-1">选项1</el-menu-item><el-menu-item index="2-2">选项2</el-menu-item><el-menu-item index="2-3">选项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-group><template slot="title">分组一</template><el-menu-item>选项1</el-menu-item><el-menu-item>选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组二"><el-menu-item>选项3</el-menu-item></el-menu-item-group><el-submenu index="1-4"><template slot="title">选项4</template><el-menu-item index="1-4-1">选项1</el-menu-item></el-submenu></el-submenu><el-menu-item index="3" disabled><i class="el-icon-document"></i><span slot="title">导航三</span></el-menu-item><el-menu-item index="4"><i class="el-icon-setting"></i><span slot="title">导航四</span></el-menu-item></el-menu><div class="line"></div><el-menu default-active="1" class="el-menu-demo" mode="horizontal" @select="handleSelect"><el-menu-item index="1">处理中心</el-menu-item><el-submenu index="2"><template slot="title">我的工作台</template><el-menu-item index="2-1">选项1</el-menu-item><el-menu-item index="2-2">选项2</el-menu-item><el-menu-item index="2-3">选项3</el-menu-item><el-submenu index="2-4"><template slot="title">选项4</template><el-menu-item index="2-4-1">选项1</el-menu-item><el-menu-item index="2-4-2">选项2</el-menu-item><el-menu-item index="2-4-3">选项3</el-menu-item></el-submenu></el-submenu><el-menu-item index="3" disabled>消息中心</el-menu-item><el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item></el-menu></div><script>new Vue({el:'#app'});</script> </body> </html>
访问页面，效果：
4. Table 表格
用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!-- 引入ElementUI样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><script src="https://unpkg.com/vue@2/dist/vue.js"></script><!-- 引入ElementUI组件库 --><script src="https://unpkg.com/element-ui/lib/index.js"></script> </head> <body><div id="app"><template><el-table :data="tableData" style="width: 100%" border stripe :header-cell-class-name="headerStyle"> <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></template></div><style>.tableStyle{background-color: #dce1e7!important;}</style><script>new Vue({el:'#app',data:{//定义vue对象的模型数据，用于table展示 tableData: [ //每个json对象对应表格中一条数据 {date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'}, {date: '2016-04-21',name: '王小虎',address: '上海市普陀区金沙江路 1520 弄'}]},methods:{headerStyle({row, column, rowIndex, columnIndex}){return "tableStyle";},handleUpdate(row){alert(row.date);},handleDelete(row){alert(row.date);}}});</script> </body> </html>
访问页面，效果：
5. Pagination 分页
当数据量过多时，使用分页分解数据。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!-- 引入ElementUI样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><script src="https://unpkg.com/vue@2/dist/vue.js"></script><!-- 引入ElementUI组件库 --><script src="https://unpkg.com/element-ui/lib/index.js"></script> </head> <body><div id="app"><span class="demonstration">完整功能</span><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage4":page-sizes="[100, 200, 300, 400]":page-size="10"layout="total, prev, pager, next, jumper, sizes":total="305"><!--total/page-size=共多少页--></el-pagination></div><script>new Vue({el:'#app',data:{currentPage4:2},methods:{handleSizeChange(val) {alert(`每页 ${val} 条`);},handleCurrentChange(val) {alert(`当前页: ${val}`);}}});</script> </body> </html>
访问页面，效果：
6. Message 消息提示
常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!-- 引入ElementUI样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><script src="https://unpkg.com/vue@2/dist/vue.js"></script><!-- 引入ElementUI组件库 --><script src="https://unpkg.com/element-ui/lib/index.js"></script> </head> <body><div id="app"><template><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></template></div><script>new Vue({el:'#app',methods:{open1() {// this.$message({// showClose: true,// message: '这是一条消息提示'// });this.$message('这是一条消息提示');},open2() {this.$message({showClose: true,message: '恭喜你，这是一条成功消息',type: 'success'});},open3() {this.$message({showClose: true,message: '警告哦，这是一条警告消息',type: 'warning'});},open4() {// this.$message({// showClose: true,// message: '错了哦，这是一条错误消息',// type: 'error'// });this.$message.error('错了哦，这是一条错误消息');}}});</script> </body> </html>
访问页面，效果：
7. Tabs 标签页
分隔内容上有关联但属于不同类别的数据集合。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!-- 引入ElementUI样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><script src="https://unpkg.com/vue@2/dist/vue.js"></script><!-- 引入ElementUI组件库 --><script src="https://unpkg.com/element-ui/lib/index.js"></script> </head> <body><div id="app"><el-tabs v-model="activeName" type="card" @tab-click="handleClick"><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><!--通过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></div><script>new Vue({el:'#app',data: {activeName: 'second'},methods:{handleClick(tab, event) {alert(tab.label);}}});</script> </body> </html>
访问页面，效果：
8. Form 表单
由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。
在 Form 组件中，每一 个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、 Checkbox、Radio、Switch、DatePicker、TimePicker。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!-- 引入ElementUI样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><script src="https://unpkg.com/vue@2/dist/vue.js"></script><!-- 引入ElementUI组件库 --><script src="https://unpkg.com/element-ui/lib/index.js"></script> </head> <body><div id="app"><!--rules：表单验证规则--><el-form ref="form" :model="form" :rules="rules" label-width="80px"><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="3"><el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker></el-col><el-col class="line" :span="0.5">-</el-col><el-col :span="3"><el-time-picker 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-button>取消</el-button></el-form-item></el-form></div><script>new Vue({el:'#app',data: {form: {name: '',region: '',date1: '',date2: '',delivery: false,type: [],resource: '',desc: ''},//定义校验规则 prop属性 rules: {name: [{ required: true, message: '请输入活动名称', trigger: 'blur' },{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }],region: [{ required: true, message: '请选择活动区域', trigger: 'change' }]}},methods:{onSubmit() {//进行输入校验，校验rules console.log(this.form);//validate：对整个表单进行校验的方法，参数为一个回调函数。//该回调函数会在校验结束后被调用，并传入两个参数，是否校验成功和未通过校验的字段。this.$refs['form'].validate((valid)=>{if(valid){alert('submit!');}else {alert('error submit');return false;}});}}});</script> </body> </html>
访问页面，效果：
9. Button 按钮
常用的操作按钮。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!-- 引入ElementUI样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><script src="https://unpkg.com/vue@2/dist/vue.js"></script><!-- 引入ElementUI组件库 --><script src="https://unpkg.com/element-ui/lib/index.js"></script> </head> <body><div id="app"><el-row><el-button>默认按钮</el-button><el-button type="primary">主要按钮</el-button><el-button type="success">成功按钮</el-button><el-button type="info">信息按钮</el-button><el-button type="warning">警告按钮</el-button><el-button type="danger">危险按钮</el-button><el-button disabled>默认按钮</el-button><el-button type="primary" disabled>主要按钮</el-button></el-row><el-row><el-button plain>朴素按钮</el-button><el-button type="primary" plain>主要按钮</el-button><el-button type="success" plain>成功按钮</el-button><el-button type="info" plain>信息按钮</el-button><el-button type="warning" plain>警告按钮</el-button><el-button type="danger" plain>危险按钮</el-button></el-row><el-row><el-button round>圆角按钮</el-button><el-button type="primary" round>主要按钮</el-button><el-button type="success" round>成功按钮</el-button><el-button type="info" round>信息按钮</el-button><el-button type="warning" round>警告按钮</el-button><el-button type="danger" round>危险按钮</el-button></el-row><el-row><el-button icon="el-icon-search" circle></el-button><el-button type="primary" icon="el-icon-edit" circle></el-button><el-button type="success" icon="el-icon-check" circle></el-button><el-button type="info" icon="el-icon-message" circle></el-button><el-button type="warning" icon="el-icon-star-off" circle></el-button><el-button type="danger" icon="el-icon-delete" circle></el-button></el-row><el-row><el-button type="primary" icon="el-icon-edit"></el-button><el-button type="primary" icon="el-icon-share"></el-button><el-button type="primary" icon="el-icon-delete"></el-button><el-button type="primary" icon="el-icon-search">搜索</el-button><el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button></el-row><el-row><el-button type="text">文字按钮</el-button><el-button type="text" disabled>文字按钮</el-button></el-row><el-row><el-button-group><el-button type="primary" icon="el-icon-arrow-left">上一页</el-button><el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button></el-button-group><el-button-group><el-button type="primary" icon="el-icon-edit"></el-button><el-button type="primary" icon="el-icon-share"></el-button><el-button type="primary" icon="el-icon-delete"></el-button></el-button-group></el-row><el-row><el-button type="primary" :loading="true">加载中</el-button></el-row></div><script>new Vue({el:'#app'});</script> </body> </html>
访问页面，效果：
10. Radio 单选框
在一组备选项中进行单选
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!-- 引入ElementUI样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><script src="https://unpkg.com/vue@2/dist/vue.js"></script><!-- 引入ElementUI组件库 --><script src="https://unpkg.com/element-ui/lib/index.js"></script> </head> <body><div id="app"><template><el-radio v-model="radio1" label="1">备选项1</el-radio><el-radio v-model="radio1" label="2">备选项2</el-radio><el-radio disabled v-model="radio2" label="禁用">备选项3</el-radio><el-radio disabled v-model="radio2" label="选中且禁用">备选项4</el-radio></template><template><div><el-radio-group v-model="radio3"><el-radio :label="3">备选项10</el-radio><el-radio :label="6">备选项11</el-radio><el-radio :label="9">备选项12</el-radio></el-radio-group></div></template><script>new Vue({el:'#app',data:{radio1: '1',radio2: '选中且禁用',radio3: 6}});</script></div> </body> </html>
访问页面，效果：
11. Checkbox 多选框
一组备选项中进行多选
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!-- 引入ElementUI样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><script src="https://unpkg.com/vue@2/dist/vue.js"></script><!-- 引入ElementUI组件库 --><script src="https://unpkg.com/element-ui/lib/index.js"></script> </head> <body><div id="app"><template><el-checkbox v-model="checked0">备选项</el-checkbox><el-checkbox v-model="checked1" disabled>备选项1</el-checkbox><el-checkbox v-model="checked2" disabled>备选项</el-checkbox></template><template><el-checkbox-group v-model="checkList"><el-checkbox label="复选框 A"></el-checkbox><el-checkbox label="复选框 B"></el-checkbox><el-checkbox label="复选框 C"></el-checkbox><el-checkbox label="禁用" disabled></el-checkbox><el-checkbox label="选中且禁用" disabled></el-checkbox></el-checkbox-group></template><template><el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox><div style="margin: 15px 0;"></div><el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange"><el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox></el-checkbox-group></template></div><script>const cityOptions = ['上海', '北京', '广州', '深圳'];new Vue({el:'#app',data:{checked0: true,checked1: false,checked2: true,checkList: ['选中且禁用','复选框 A'],checkAll: false,checkedCities: ['上海', '北京'],cities: cityOptions,isIndeterminate: true},methods:{handleCheckAllChange(val) {this.checkedCities = val ? cityOptions : [];this.isIndeterminate = false;},handleCheckedCitiesChange(value) {let checkedCount = value.length;this.checkAll = checkedCount === this.cities.length;this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;}}});</script> </body> </html>
访问页面，效果：
12. Input输入框
通过鼠标或键盘输入字符
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!-- 引入ElementUI样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><script src="https://unpkg.com/vue@2/dist/vue.js"></script><!-- 引入ElementUI组件库 --><script src="https://unpkg.com/element-ui/lib/index.js"></script> </head> <body><div id="app"><div><el-input v-model="input1" placeholder="请输入内容"></el-input></div><div style="margin-top: 15px;"><el-input placeholder="请输入内容" v-model="input2" :disabled="true"></el-input></div><div style="margin-top: 15px;"><el-input placeholder="请输入内容" v-model="input3" clearable></el-input></div><div style="margin-top: 15px;"><el-input placeholder="请输入密码" v-model="input4" show-password></el-input></div><div style="margin-top: 15px;"><el-inputtype="text"placeholder="请输入内容"v-model="text"maxlength="10"show-word-limit></el-input></div><div style="margin-top: 15px;"><el-inputtype="textarea":rows="2"placeholder="请输入内容"v-model="textarea"></el-input></div><div style="margin-top: 15px;"><el-input placeholder="请输入内容" v-model="input5"><template slot="prepend">Http://</template></el-input></div><div style="margin-top: 15px;"><el-input placeholder="请输入内容" v-model="input6"><template slot="append">.com</template></el-input></div><div style="margin-top: 15px;"><el-input placeholder="请输入内容" v-model="input7" class="input-with-select"><el-select v-model="select" slot="prepend" placeholder="请选择"><el-option label="餐厅名" value="1"></el-option><el-option label="订单号" value="2"></el-option><el-option label="用户电话" value="3"></el-option></el-select><el-button slot="append" icon="el-icon-search"></el-button></el-input></div><div class="demo-input-size"><el-inputplaceholder="请输入内容"suffix-icon="el-icon-date"v-model="input8"></el-input><el-inputsize="medium"placeholder="请输入内容"suffix-icon="el-icon-date"v-model="input9"></el-input><el-inputsize="small"placeholder="请输入内容"suffix-icon="el-icon-date"v-model="input10"></el-input></div><div><div class="sub-title">激活即列出输入建议</div><el-autocompleteclass="inline-input"v-model="state1":fetch-suggestions="querySearch"placeholder="请输入内容"@select="handleSelect"></el-autocomplete></div></div><script>new Vue({el: '#app',data: {input1: '',input2: '',input3: '',input4: '',text: '',textarea: '',input5: '',input6: '',input7: '',select: '',input8: '',input9: '',input10: '',restaurants: [],state1: ''},methods:{querySearch(queryString, cb) {var restaurants = this.restaurants;var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;// 调用 callback 返回建议列表的数据 cb(results);},createFilter(queryString) {return (restaurant) => {return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);};},loadAll() {return [{ "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },{ "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },{ "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },{ "value": "泷千家(天山西路店)", "address": "天山西路438号" },{ "value": "福荣祥烧腊（平溪路店）", "address": "上海市长宁区协和路福泉路255弄57-73号" },{ "value": "速记黄焖鸡米饭", "address": "上海市长宁区北新泾街道金钟路180号1层01号摊位" },{ "value": "红辣椒麻辣烫", "address": "上海市长宁区天山西路492号" },{ "value": "(小杨生煎)西郊百联餐厅", "address": "长宁区仙霞西路88号百联2楼" },{ "value": "阳阳麻辣烫", "address": "天山西路389号" },{ "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }];},handleSelect(item) {console.log(item);}},mounted() {this.restaurants = this.loadAll();}});</script> </body> </html>
访问页面，效果：
13. Select 选择器
当选项过多时，使用下拉菜单展示并选择内容。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!-- 引入ElementUI样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><script src="https://unpkg.com/vue@2/dist/vue.js"></script><!-- 引入ElementUI组件库 --><script src="https://unpkg.com/element-ui/lib/index.js"></script> </head> <body><div id="app"><template><el-select v-model="value" placeholder="请选择"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value":disabled="item.disabled"></el-option></el-select></template><template><el-select v-model="value" clearable placeholder="请选择"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select></template><template><el-select v-model="value1" multiple placeholder="请选择"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select></template></div><script>new Vue({el: '#app',data: {options: [{value: '选项1',label: '黄金糕'}, {value: '选项2',label: '双皮奶',disabled: true}, {value: '选项3',label: '蚵仔煎'}, {value: '选项4',label: '龙须面'}, {value: '选项5',label: '北京烤鸭'}],value: '',value1: [],}});</script> </body> </html>
访问页面，效果：
14. DatePicker 日期选择器
用于选择或输入日期
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!-- 引入ElementUI样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><script src="https://unpkg.com/vue@2/dist/vue.js"></script><!-- 引入ElementUI组件库 --><script src="https://unpkg.com/element-ui/lib/index.js"></script> </head> <body><div id="app"><!--选择日--><template><div class="block"><span class="demonstration">选择日</span><el-date-pickerv-model="value1"type="date"placeholder="选择日期":picker-options="pickerOptions"></el-date-picker></div></template><!--选择日期范围--><template><div class="block"><span class="demonstration">选择日期范围</span><el-date-pickerv-model="value2"type="daterange"range-separator="至"start-placeholder="开始日期"end-placeholder="结束日期"></el-date-picker></div></template></div><script>new Vue({el: '#app',data: {value1: '',value2: '',pickerOptions: {disabledDate(time) {return time.getTime() > Date.now();}}}});</script> </body> </html>
访问页面，效果：
15. Upload 上传
通过点击或者拖拽上传文件
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!-- 引入ElementUI样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><script src="https://unpkg.com/vue@2/dist/vue.js"></script><!-- 引入ElementUI组件库 --><script src="https://unpkg.com/element-ui/lib/index.js"></script> </head> <body><div id="app"><el-uploadclass="upload-demo"action="https://jsonplaceholder.typicode.com/posts/":on-preview="handlePreview":on-remove="handleRemove"multiple:limit="3":on-exceed="handleExceed":before-upload="beforeUpload":before-remove="beforeRemove":file-list="fileList"><el-button size="small" type="primary">点击上传</el-button><div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div></el-upload></div><script>new Vue({el: '#app',data: {fileList: [{name: 'food.jpeg',url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'},{name: 'food2.jpeg',url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]},methods: {handleRemove(file, fileList) {console.log(file, fileList);},handlePreview(file) {console.log(file);},handleExceed(files, fileList) {this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);},beforeRemove(file, fileList) {if(file && file.status==="success"){return this.$confirm(`确定移除 ${ file.name }？`);}},beforeUpload(file) {const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';;const isLt2M = file.size / 1024 / 1024 < 2;if (!isJPG) {this.$message.error('上传头像图片只能是 JPG/PNG 格式!');}if (!isLt2M) {this.$message.error('上传头像图片大小不能超过 2MB!');}return isJPG && isLt2M;}}});</script> </body> </html>
访问页面，效果：
16. Dialog 对话框
在保留当前页面状态的情况下，告知用户并承载相关操作。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!-- 引入ElementUI样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><script src="https://unpkg.com/vue@2/dist/vue.js"></script><!-- 引入ElementUI组件库 --><script src="https://unpkg.com/element-ui/lib/index.js"></script> </head> <body><div id="app"><!--Dialog 弹出一个对话框--><div><el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button><el-dialogtitle="提示":visible.sync="dialogVisible"width="30%":before-close="handleClose"><span>这是一段信息</span><span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="dialogVisible = false">确 定</el-button></span></el-dialog></div><!--Dialog 组件的内容是表格或表单--><!--Table--><div><el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button><el-dialog title="收货地址" :visible.sync="dialogTableVisible"><el-table :data="gridData"><el-table-column property="date" label="日期" width="150"></el-table-column><el-table-column property="name" label="姓名" width="200"></el-table-column><el-table-column property="address" label="地址"></el-table-column></el-table></el-dialog></div><!--Form--><div><el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button><el-dialog title="收货地址" :visible.sync="dialogFormVisible"><el-form :model="form"><el-form-item label="活动名称" :label-width="formLabelWidth"><el-input v-model="form.name" autocomplete="off"></el-input></el-form-item><el-form-item label="活动区域" :label-width="formLabelWidth"><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><div slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary" @click="dialogFormVisible = false">确 定</el-button></div></el-dialog></div></div><script>new Vue({el:'#app',data: {dialogVisible: false,gridData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}],dialogTableVisible: false,dialogFormVisible: false,form: {name: '',region: '',date1: '',date2: '',delivery: false,type: [],resource: '',desc: ''},formLabelWidth: '120px'},methods: {handleClose(done) {this.$confirm('确认关闭？').then(_ => {done();}).catch(_ => {});}}});</script> </body> </html>
访问页面，效果：
17. MessageBox 弹框
模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、确认消息和提交内容。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!-- 引入ElementUI样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><script src="https://unpkg.com/vue@2/dist/vue.js"></script><!-- 引入ElementUI组件库 --><script src="https://unpkg.com/element-ui/lib/index.js"></script> </head> <body><div id="app"><!--消息提示：当用户进行操作时会被触发，该对话框中断用户操作，直到用户确认知晓后才可关闭。--><div><template><el-button type="text" @click="open1">点击打开 Message Box</el-button></template></div><!--确认消息：提示用户确认其已经触发的动作，并询问是否进行此操作时会用到此对话框。--><div><template><el-button type="text" @click="open2">点击打开 Message Box</el-button></template></div><!--提交内容：当用户进行操作时会被触发，中断用户操作，提示用户进行输入的对话框。--><template><el-button type="text" @click="open3">点击打开 Message Box</el-button></template></div><script>new Vue({el:'#app',data: {},methods: {open1() {this.$alert('这是一段内容', '标题名称', {confirmButtonText: '确定',callback: action => {this.$message({type: 'info',message: `action: ${ action }`});}});},open2() {this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {this.$message({type: 'success',message: '删除成功!'});}).catch(() => {this.$message({type: 'info',message: '已取消删除'});});},open3() {this.$prompt('请输入邮箱', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,inputErrorMessage: '邮箱格式不正确'}).then(({ value }) => {this.$message({type: 'success',message: '你的邮箱是: ' + value});}).catch(() => {this.$message({type: 'info',message: '取消输入'});});}}});</script> </body> </html>
访问页面，效果：
)
 4A All-Lost Adapter Cable: Simplify Key Replacement for Mechanics Car Owners)
)
)
 – Reliable Replacement for Euro/American Cars)
