你还在用古老的HTML和CSS吗？还在手敲吗？那么你是时候打开新前端的大门了————Element-UI全面详解
目录
- 1、Element-UI简介
- 2、Element-UI起步
- 3、Element插件和学习建议
- 4、Container布局容器
- 5、Layout布局
- 6、button按钮
- 7、Icon图标
- 8、input输入框
- 9、Form表单基础
- 10、Radio单选按钮
- 11、Checkbox复选框
- 12、Switch开关
- 13、Select选择器
- 14、Cascader级联选择器
- 15、DateTimePicker日期时间选择器
- 16、Validator表单校验
- 17、自定义校验规则
- 18、表单校验综合案例
- 19、Table表格
- 20、Pagination分页
- 21、Dialog对话框
- 22、实战一、环境准备
- 23、实战二、分页查询
- 24、实战三、添加
- 25、实战四、删除功能
- 26、实战五、更新功能
- 27、Card卡片
- 28、Breadcrumb面包屑
- 29、Steps进度条
- 30、导航菜单的基本使用
- 31、导航菜单的折叠
- 32、导航菜单的select事件
- 33、导航的路由模式
- 34、组合应用
- 35、Avatar头像
- 36、Dropdown下拉菜单
- 37、Alert警告
- 38、页头
- 39、Loading加载
- 40、Message消息提示
- 41、MessageBox弹窗
- 42、Tabs标签页
- 43、Tree树型控件的基本使用
- 44、Tree树型控件的可选择
- 45、Tree树型控件-从服务器获取数据
- 46、Tree树型控件-自定义节点内容
1、Element-UI简介
返回目录
element-ui，一套为开发者，设计师和产品经理准备的基于Vue的桌面端组件库，使用前端框架封装的代码帮助工程师快速开发
Element-UI的特点：
丰富的组件
element-ui的组件分为六大类：分别是基础组件、表单类组件、数据类组件、提示类组件、导航类组件和其它类型组件。这些丰富的基础组件能很好的满足大部分PC端to B业务开发需求
成熟的生态
element-ui是国内做Vue的UI框架中最早，也最成熟的一家。用户群体多，遇到问题基本都能解决
优秀的开发文档
element-ui文档和demo是融为一体的，我们打开它的文档，可以看到文档不仅介绍了每个组件的使用方式，还展示看组件的各种示例，并且还可以清楚的看到每个示例的源码，对用户而言非常友好
自定义主题
element-ui的一大特色是支持自定义主题，你可以使用在线主题编辑器，可以修改Element所有全局和组件的Design Tokens，并可以方便地实时预览样式改变后的视觉
2、Element-UI起步
返回目录
官方推荐使用npm的方式使用element-ui，接下来我们借助vue-cli项目演示element-ui的使用
2.1、第1个Element-UI项目
1.新建vue-cli项目：
Vue CLI详解
我使用vuecli4版本
2.在项目中添加element-ui库
进入项目目录，执行安装element-ui的命令：
npm install element-ui --save
3.在main.js中配置element-ui：
//引入element-ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
//使用插件
Vue.use(ElementUI);
element-ui样式初体验：
<template>
<div id="app">
<hr>
<el-button type="primary">elementUI的按钮el-button>
<el-button type="danger">elementUI的按钮el-button>
<el-date-picker type="date">el-date-picker>
<hr>
div>
template>
<script>
export default {
name:'App'
}
script>
<style>
style>
运行测试：npm run serve
3、Element插件和学习建议
返回目录
打开WebStorm的设置，搜索并下载element插件
点击install下载安装，重启
该插件为我们提供了默认补全功能
element-ui的学习建议
掌握核心的组件
不同的element-ui组件封装不同的UI效果，element-ui有60多个组件，常用的组件并不多，抓住关键的常用组件即可
掌握典型语法
element-ui的组件功能都比较强大，也就有了大量的配置属性，很多属性并不常用，在掌握组件时，通过典型用法，掌握关键属性即可
大胆试错，多查官方文档
学习任何新的知识都不要怕错，多做多尝试，在错误中学习掌握知识，官方示例非常全面，在遇到问题时，可以阅读官方文档，对照文档示例挑错
熟能生巧，巧能生精
世上无难事只怕有心人，多敲多练，哪个不熟就针对性练习哪个，无需死记硬背，练多了自然就掌握了
4、Container布局容器
返回目录
用于布局的容器组件，方便快速搭建页面的基本结构：
<el-container>:外层容器
<el-header>:顶栏容器
<el-aside>:侧边栏容器
<el-main>:主要区域容器
<el-footer>:底栏容器
常见的页面布局
代码体验展示：
在view包下建立Home.vue组件:
<template>
<div id="app">
<router-link to="/Home">按钮router-link>
<router-view>router-view>
div>
template>
<script>
export default {
name:'App',
}
script>
<style>
style>
路由配置：
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const Home = () => import("../views/Home.vue")
const routes = [
{
path: '/Home',
name: 'Home',
component:Home,
},
]
const router = new VueRouter({
routes,
mode:'history'
})
export default router
App.vue:
运行测试：
调样式：点加标签名即可
运行：
加入aside使其并列排序：（因为容器是单行排列的，所以我们要借助el-container）
总结：
- el-container内有el-header或者el-footer子元素，全部子元素呈垂直排列
- 需要水平左右排列时，需要再定义el-container包含水平左右排列的子元素
为了方便演示，我们给路由添加默认路径：
5、Layout布局
返回目录
布局可以快速的将一块区域，分成多列，每列最多可以分成基础的24分栏，迅速简便地创建布局
5.1、基础布局
通过row和col组件，并通过col组件的span属性我们就可以自由地组合布局
Layout.vue:
<template>
<div>
<el-row :gutter="10">
<el-col :span="12"><div class="grid-content bg-purple">div>el-col>
<el-col :span="12"><div class="grid-content bg-purple-light">div>el-col>
el-row>
<el-row :gutter="10">
<el-col :span="8"><div class="grid-content bg-purple">div>el-col>
<el-col :span="8"><div class="grid-content bg-purple-light">div>el-col>
<el-col :span="8"><div class="grid-content bg-purple">div>el-col>
el-row>
<el-row :gutter="10">
<el-col :span="6"><div class="grid-content bg-purple">div>el-col>
<el-col :span="6"><div class="grid-content bg-purple-light">div>el-col>
<el-col :span="6"><div class="grid-content bg-purple">div>el-col>
<el-col :span="6"><div class="grid-content bg-purple-light">div>el-col>
el-row>
<el-row :gutter="10">
<el-col :span="4"><div class="grid-content bg-purple">div>el-col>
<el-col :span="4"><div class="grid-content bg-purple-light">div>el-col>
<el-col :span="4"><div class="grid-content bg-purple">div>el-col>
<el-col :span="4"><div class="grid-content bg-purple-light">div>el-col>
<el-col :span="4"><div class="grid-content bg-purple">div>el-col>
<el-col :span="4"><div class="grid-content bg-purple-light">div>el-col>
el-row>
div>
template>
<script>
export default {
name: "Layout"
}
script>
<style scoped>
.el-row{
margin-bottom: 20px;
&:last-child{
margin-bottom: 0;
}
}
.el-col{
border-radius: 4px;
}
.bg-purple-dark{
background-color: #99a9bf;
}
.bg-purple{
background-color: #d3dce6;
}
.bg-purple-light{
background-color: #e5e9f2;
}
.grid-content{
border-radius: 4px;
min-height: 36px;
}
.row-bg{
padding: 10px 0;
background-color: #f9fafc;
}
style>
路由注册：
上面的可以直接通过地址访问：
设置路由本页访问：将/Layout设置为/Home的子路径：
在Home.vue中设置展出按钮和展出位置：
运行测试：
5.2、分栏间隔：
row组件提供gutter属性来指定每一栏之间的间隔：
5.3、分栏偏移：
通过制定col组件的offset属性可以指定分栏位置向右偏移的栏数
组件之间不会挤压
5.4、对齐方式：
将row组件type属性赋值为flex，可以启用flex布局，并可通过justify属性来指定start，center，end，space-between，space-around其中的值来定义子元素的排版方式
6、button按钮
返回目录
element-ui提供了常用的操作按钮组件：el-button
6.1、基础用法
通过type属性定义按钮的风格
Button.vue：
<template>
<div>
<el-row :gutter="10">
<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-row>
div>
template>
<script>
export default {
name: "Button"
}
script>
<style scoped>
style>
路由配置：
App.vue:
运行测试：
路由显示使用方法后续不再展示（不懂的请订阅我的Vue专栏学习，或者直接看：Vuejs第五篇（vue-router路由和tabbar））
路由展示的
数据组件分离式写法：
去掉li的样式代码自己写
运行：
6.2、按钮样式：
通过plain、round、circle和disabled属性来定义Button的样式
<template>
<div>
<el-row :gutter="10">
<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-row>
<el-row :gutter="10">
<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 :gutter="10">
<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 :gutter="10">
<el-button circle>大圆角按钮el-button>
<el-button type="primary" circle>主要按钮el-button>
<el-button type="success" circle>成功按钮el-button>
<el-button type="info" circle>信息按钮el-button>
<el-button type="warning" circle>警告按钮el-button>
<el-button type="danger" circle>危险按钮el-button>
el-row>
<el-row :gutter="10">
<el-button disabled>禁用按钮el-button>
<el-button type="primary" disabled>主要按钮el-button>
<el-button type="success" disabled>成功按钮el-button>
<el-button type="info" disabled>信息按钮el-button>
<el-button type="warning" disabled>警告按钮el-button>
<el-button type="danger" disabled>危险按钮el-button>
el-row>
div>
template>
<script>
export default {
name: "Button"
}
script>
<style scoped>
style>
运行：
6.3、按钮尺寸
Button组件提供除了默认值以外，还有3种额外的尺寸：medium、small、mini，通过设置size属性来配置它们，可以在不同场景下选择合适的按钮尺寸
<el-row>
<el-button>默认按钮el-button>
<el-button size="medium">中等按钮el-button>
<el-button size="small">小型按钮el-button>
<el-button size="mini">超小按钮el-button>
el-row>
6.4、按钮组
使用
<el-button-group>
<el-button type="primary">编辑el-button>
<el-button type="primary">分享el-button>
<el-button type="primary">删除el-button>
el-button-group>
<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>
7、Icon图标
返回目录
element-ui提供了一套常用的图标集合
7.1、使用方法
为i标签直接设置class为el-icon-iconName的属性来使用图标。例如
Icon.vue
<div>
<i class="el-icon-delete">i>
<i class="el-icon-edit">i>
<i class="el-icon-share">i>
div>
更多的图标可以查看官网
class设置为对应值即可（建议写icon属性）
8、input输入框
返回目录
input输入框组件必须使用v-model与数据绑定，并且它总是会显示Vue的绑定值
8.1、type=text输入框
使用clearable属性即可得到一个可清空的输入框
<el-row :gutter="10">
<el-input v-model="username" placeholder="请输入信息" type="text" clearable>el-input>
el-row>
必须绑定一个值：
可清空的意思是：
8.2、密码框
使用show-password属性即可得到一个可切换显示隐藏的密码框
<el-input v-model="password" placeholder="请输入密码" type="password" clearable show-password>el-input>
8.3、type=textarea文本域
通过设置autosize属性可以使得文本域的高度能够根据文本内容自动进行调整，并且autosize还可以设定为一个对象，指定最小行数和最大行数，对于类型为text或textarea的输入框，可使用maxlength属性限制最大输入长度，还可通过设置show-word-limit属性来展示字数统计
<el-row :gutter="10">
<el-input v-model="description" type="textarea" :autosize="{minRows:2,maxRows:4}" maxlength="200" show-word-limit>el-input>
el-row>
8.4、尺寸
可通过size属性指定输入框的尺寸，除了默认的大小外，还提供了large、small和mini三种尺寸
<el-row :gutter="10">
<el-input v-model="input" placeholder="placeholder">el-input>
<el-input v-model="input" placeholder="placeholder" size="medium">el-input>
<el-input v-model="input" placeholder="placeholder" size="small">el-input>
<el-input v-model="input" placeholder="placeholder" size="mini">el-input>
el-row>
8.5、带图标的输入框
可以通过prefix-icon和suffix-icon属性在input组件首部和尾部增加显示图标，也可以通过slot来放置图标
第一种方式：
<el-row :gutter="10" type="flex" justify="space-around">
<el-col :span="3">slot方式el-col>
<el-col :span="6">
<el-input v-model="input" placeholder="请选择日期"><i slot="suffix" class="el-input__icon el-icon-date">i>el-input>
el-col>
<el-col :span="6">
<el-input v-model="input" placeholder="请输入内容"><i slot="prefix" class="el-input__icon el-icon-search">i>el-input>
el-col>
el-row>
第二种方式：
<el-row :gutter="10" type="flex" justify="space-around">
<el-col :span="6">
<el-input v-model="input" placeholder="请选择日期" suffix-icon="el-icon-date">el-input>
el-col>
<el-col :span="6">
<el-input v-model="input" placeholder="请输入内容" prefix-icon="el-icon-search">el-input>
el-col>
el-row>
8.6、复合型输入框
可通过slot来指定在input中前置或者后置内容
<div>
<el-input v-model="input" placeholder="请输入内容">
<template slot="prepend">Http://template>
el-input>
div>
<div style="margin-top: 15px;">
<el-input v-model="input" placeholder="请输入内容">
<template slot="append">.comtemplate>
el-input>
div>
9、Form表单基础
返回目录
由输入框、选择器、单选框、多选框等控件组成，用于收集、校验、提交数据
9.1、典型表单
在Form组件中，每一个表单域由一个From-Item组件构成，表单域中可以放置各种类型的表单控件，包括Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker。必须为表单的model属性绑定一个数据，表单的ref属性类似id用户标识一个表单
Form.vue：一个简单的表单
<template>
<div>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="用户名">
<el-input v-model="user.username" placeholder="请输入用户名">el-input>
el-form-item>
<el-form-item label="密码">
<el-input v-model="user.password" placeholder="请输入密码">el-input>
el-form-item>
<el-form-item>
<el-button type="primary">登入el-button>
el-form-item>
el-form>
div>
template>
<script>
export default {
name: "Form",
data(){
return{
user:{
username:'',
password:''
}
}
}
}
script>
<style scoped>
style>
9.2、行内表单
当垂直方向空间受限且表单较简单时，可以在一行内放置表单，设置inline属性可以让表单域变为行内的表单域
<el-form ref="form" :model="form" label-width="80px" :inline="true">
<el-form-item label="用户名">
<el-input v-model="user.username" placeholder="请输入用户名">el-input>
el-form-item>
<el-form-item label="密码">
<el-input v-model="user.password" placeholder="请输入密码">el-input>
el-form-item>
<el-form-item>
<el-button type="primary">登入el-button>
el-form-item>
el-form>
9.3、对齐方式
通过设置label-position属性可以改变表单域标签的位置，可选值为top、left、right，当设为top时标签会置于表单域的顶部
<el-form ref="form" :model="user" label-width="80px" label-position="top">
<el-form-item label="用户名">
<el-input v-model="user.username" placeholder="请输入用户名">el-input>
el-form-item>
<el-form-item label="密码">
<el-input v-model="user.password" placeholder="请输入密码">el-input>
el-form-item>
<el-form-item>
<el-button type="primary">登入el-button>
el-form-item>
el-form>
10、Radio单选按钮
返回目录
Radio单选框（在一组选项中进行单选）
10.1、基础语法
由于选项默认可见，不宜过多，若选项过多，建议使用Select选择器
添加为一组按钮要使用label标签指定属性值，v-model绑定为一组单选按钮：
<el-radio v-model="user.sex" label="男">男el-radio>
<el-radio v-model="user.sex" label="女">女el-radio>
sex的属性值为‘男’的时候男默认被选中，为‘女’的时候女默认被选中，且sex的值随自选状态而改变值
上面这种绑定一组单选按钮的方式并不简单，现在让我们来接触一下简单的绑定
10.2、单选框组
当一组单选按钮数量多时，再通过v-model分别为多个单选按钮绑定数据就会非常的繁琐，此时可以通过el-radio-group简化绑定，在el-radio-group中绑定v-model，在el-radio中设置好label即可，无需再给每一个el-radio绑定变量。另外，单选框组还提供了change事件来响应变化，它会传入一个参数value
<el-radio-group v-model="user.sex" @change="handleChange">
<el-radio label="男">男el-radio>
<el-radio label="女">女el-radio>
el-radio-group>
11、Checkbox复选框
返回目录
基本使用
和单选框相似，复选框组件也使用label属性定义按钮值，使用v-model绑定的数据必须是按钮的label值
<el-row :gutter="10">
<el-checkbox v-model="favorites" label="吃" @change="handleChange">吃el-checkbox>
<el-checkbox v-model="favorites" label="喝" @change="handleChange">喝el-checkbox>
<el-checkbox v-model="favorites" label="玩" @change="handleChange">玩el-checkbox>
<el-checkbox v-model="favorites" label="乐" @change="handleChange">乐el-checkbox>
el-row>
favorites此时必须为数组，且有大于1的默认值
此时函数值返回的是按钮选中状态，true或false
默认选中：
11.2、复选框组
当一组复选框数量多时，再通过v-model分别为多个复选框绑定数据就会非常繁琐，此时可以通过el-checkbox-group简化绑定。在el-checkbox-group中绑定v-model，
在el-checkbox中设置好label即可，无需再给每一个el-checkbox绑定数量
<el-checkbox-group v-model="favorites">
<el-checkbox v-for="item in favoritesList" :label="item" :key="item">{
{item}}el-checkbox>
el-checkbox-group>
这种循环遍历的方式很不错，推荐后面以后都这样使用
12、Switch开关
返回目录
表示两种相互对立的状态间的切换，多用于触发开关
12.1、基本用法：
绑定v-model到一个Boolean类型的变量。可以使用active-color属性与inactive-color属性来设置开关的颜色。使用active-text属性与inactive-text属性来设置开关的文字描述
<template>
<div>
<el-row :gutter="10">
<el-switch v-model="value"
active-color="#13ce66"
inactive-color="#ff4949"
active-text="开"
inactive-text="关">
el-switch>
el-row>
div>
template>
<script>
export default {
name: "Switch",
data(){
return{
value:true
}
}
}
script>
<style scoped>
style>
12.2、扩展的value类型
开关可绑定的数据默认为Boolean类型，开就是true，关就是false，可以通过active-value和inactive-value属性自定义开和关的值
<template>
<div>
<el-row :gutter="10">
<el-switch v-model="value"
active-color="#13ce66"
inactive-color="#ff4949"
active-text="1"
inactive-text="0">
el-switch>
el-row>
div>
template>
<script>
export default {
name: "Switch",
data(){
return{
value:0
}
}
}
script>
<style scoped>
style>
个人爱好：
<template>
<div>
<el-row :gutter="10">
<el-switch v-model="value"
active-color="#13ce66"
inactive-color="gray"
active-text="用户锁定">
el-switch>
el-row>
div>
template>
<script>
export default {
name: "Switch",
data(){
return{
value:0
}
}
}
script>
<style scoped>
style>
13、Select选择器
返回目录
当选项过多时，使用下拉菜单展示并选择内容。选择器由el-Select标签通过v-model绑定数据。当选中的值发生变化时，会触发change事件
Select.vue:
<template>
<el-row :gutter="10">
<el-select v-model="model" placeholder="请选择食物">
<el-option
v-for="item in optionsList"
:key="item.value"
:label="item.label"
:value="item.value">
el-option>
el-select>
el-row>
template>
<script>
export default {
name: "Select",
data(){
return{
model:'',
optionsList:[
{
value:'1',label:'黄金糕'},{
value: '2',label: '双皮奶'},{
value: '3',label: '蚵仔煎'},{
value: '4',label: '龙须面'},
{
value: '5',label: '北京烤鸭'}
]
}
}
}
script>
<style scoped>
style>
写个回调函数看看输出内容：
输出的value对应的值（这里是数字）
我们还可以设置clearable属性：
14、Cascader级联选择器
返回目录
当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择
14.1、基础用法
只需为Cascader的option属性指定选项数组即可渲染出一个级联选择器。通过props.expandTrigger可以定义展开子级菜单的触发方式。注意，此时使用v-model绑定的数据必须是一个数组。当选择一个选项时，会触发change事件
<template>
<div>
<div class="block">
<span class="demonstration">默认 click 触发子菜单span>
<el-cascader
v-model="value"
:options="options"
@change="handleChange">el-cascader>
div>
<div class="block">
<span class="demonstration">hover 触发子菜单span>
<el-cascader
v-model="value"
:options="options"
:props="{ expandTrigger: 'hover' }"
@change="handleChange">el-cascader>
div>
div>
template>
<script>
export default {
name:'Cascader',
data() {
return {
value: [],
options: [{
value: 'zhinan',
label: '指南',
children: [{
value: 'shejiyuanze',
label: '设计原则',
children: [{
value: 'yizhi',
label: '一致'
}, {
value: 'fankui',
label: '反馈'
}, {
value: 'xiaolv',
label: '效率'
}, {
value: 'kekong',
label: '可控'
}]
}, {
value: 'daohang',
label: '导航',
children: [{
value: 'cexiangdaohang',
label: '侧向导航'
}, {
value: 'dingbudaohang',
label: '顶部导航'
}]
}]
}, {
value: 'zujian',
label: '组件',
children: [{
value: 'basic',
label: 'Basic',
children: [{
value: 'layout',
label: 'Layout 布局'
}, {
value: 'color',
label: 'Color 色彩'
}, {
value: 'typography',
label: 'Typography 字体'
}, {
value: 'icon',
label: 'Icon 图标'
}, {
value: 'button',
label: 'Button 按钮'
}]
}, {
value: 'form',
label: 'Form',
children: [{
value: 'radio',
label: 'Radio 单选框'
}, {
value: 'checkbox',
label: 'Checkbox 多选框'
}, {
value: 'input',
label: 'Input 输入框'
}, {
value: 'input-number',
label: 'InputNumber 计数器'
}, {
value: 'select',
label: 'Select 选择器'
}, {
value: 'cascader',
label: 'Cascader 级联选择器'
}, {
value: 'switch',
label: 'Switch 开关'
}, {
value: 'slider',
label: 'Slider 滑块'
}, {
value: 'time-picker',
label: 'TimePicker 时间选择器'
}, {
value: 'date-picker',
label: 'DatePicker 日期选择器'
}, {
value: 'datetime-picker',
label: 'DateTimePicker 日期时间选择器'
}, {
value: 'upload',
label: 'Upload 上传'
}, {
value: 'rate',
label: 'Rate 评分'
}, {
value: 'form',
label: 'Form 表单'
}]
}, {
value: 'data',
label: 'Data',
children: [{
value: 'table',
label: 'Table 表格'
}, {
value: 'tag',
label: 'Tag 标签'
}, {
value: 'progress',
label: 'Progress 进度条'
}, {
value: 'tree',
label: 'Tree 树形控件'
}, {
value: 'pagination',
label: 'Pagination 分页'
}, {
value: 'badge',
label: 'Badge 标记'
}]
}, {
value: 'notice',
label: 'Notice',
children: [{
value: 'alert',
label: 'Alert 警告'
}, {
value: 'loading',
label: 'Loading 加载'
}, {
value: 'message',
label: 'Message 消息提示'
}, {
value: 'message-box',
label: 'MessageBox 弹框'
}, {
value: 'notification',
label: 'Notification 通知'
}]
}, {
value: 'navigation',
label: 'Navigation',
children: [{
value: 'menu',
label: 'NavMenu 导航菜单'
}, {
value: 'tabs',
label: 'Tabs 标签页'
}, {
value: 'breadcrumb',
label: 'Breadcrumb 面包屑'
}, {
value: 'dropdown',
label: 'Dropdown 下拉菜单'
}, {
value: 'steps',
label: 'Steps 步骤条'
}]
}, {
value: 'others',
label: 'Others',
children: [{
value: 'dialog',
label: 'Dialog 对话框'
}, {
value: 'tooltip',
label: 'Tooltip 文字提示'
}, {
value: 'popover',
label: 'Popover 弹出框'
}, {
value: 'card',
label: 'Card 卡片'
}, {
value: 'carousel',
label: 'Carousel 走马灯'
}, {
value: 'collapse',
label: 'Collapse 折叠面板'
}]
}]
}, {
value: 'ziyuan',
label: '资源',
children: [{
value: 'axure',
label: 'Axure Components'
}, {
value: 'sketch',
label: 'Sketch Templates'
}, {
value: 'jiaohu',
label: '组件交互文档'
}]
}]
};
},
methods: {
handleChange(value) {
console.log(value);
}
}
};
script>
<style scoped>
style>
为el-cascader设置clearable属性，则可将选择器清空。为el-cascader添加filterable属性即可启用搜索功能，这里不再演示代码，都挺简单
15、DateTimePicker日期时间选择器
返回目录
通过设置DatePicker组件的type属性为datetime，即可在同一个选择器里同时进行日期和时间的选择
15.1、基本使用
通过v-model为日期选择器绑定数据，选择日期时间后会触发change事件
DatePicker.vue
<template>
<div>
<el-date-picker v-model="value"
type="date" placeholder="请选择日期事件"
@change="handleChange">
el-date-picker>
div>
template>
<script>
export default {
name: "DatePicker",
data(){
return{
value:''
}
},
methods:{
handleChange(value){
console.log(value)
console.log(this.value)
}
}
}
script>
<style scoped>
style>
我们可以指定日期输出格式：（利用value-format属性指定）
value-format="yyyy-MM-dd HH:mm:ss"
16、Validator表单校验
返回目录
在防止用户犯错的前提下，尽可能让用户更早地发现并纠正错误
16.1、简单案例：
Form组件提供了表单验证功能，只需要通过rules属性传入约定的验证规则，并将Form-Item的prop属性设置为需校验的字段名即可
<template>
<el-form ref="form" :model="user" label-width="180px" :rules="formRules" label-position="top" size="medium">
<el-form-item label="用户名" prop="username">
<el-input v-model="user.username" placeholder="请输入用户名">el-input>
el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="user.password" placeholder="请输入密码">el-input>
el-form-item>
<el-form-item align="center">
<el-button type="primary" @click="handleSubmit">登入el-button>
el-form-item>
el-form>
template>
<script>
export default {
name: "Validator",
methods:{
handleSubmit(){
//发起登入请求前,再次进行表单校验
//先获取表单对象,然后执行校验方法
//ref具有id的效果，所以我们可以使用$refs
this.$refs["form"].validate(valid=>{
//valid为校验后的结果，值为true校验通过，false校验失败
if(valid){
alert("校验通过，可以发起请求")
}else {
alert("校验失败，不可以发起请求")
}
})
}
},
data(){
return{
user:{
username:'',
password:''
},
formRules:{
username: [
{
required:true,message:"用户名不能为空",trigger:"blur"},
{
min:3,max:5,message: "用户名长度在3~5个字符间",trigger: "blur"}
],
password: [
{
required:true,message:"密码不能为空",trigger:'blur'}
]
}
}
},
}
script>
<style scoped>
style>
17、自定义校验规则
返回目录
<template>
<div>
<el-form ref="form" :model="user" label-width="180px" label-position="top" size="mini" :rules="formRules">
<el-form-item label="用户名" prop="username">
<el-input v-model="user.username" placeholder="请输入用户名">el-input>
el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="user.password" placeholder="请输入密码">el-input>
el-form-item>
<el-form-item label="确认密码" prop="password2">
<el-input v-model="user.password2" placeholder="请确认密码">el-input>
el-form-item>
<el-form-item align="center">
<el-button type="primary" @click="handleSubmit">登入el-button>
el-form-item>
el-form>
div>
template>
<script>
export default {
name: "Validator",
methods:{
handleSubmit(){
//发起登入请求前,再次进行表单校验
//先获取表单对象,然后执行校验方法
//ref具有id的效果，所以我们可以使用$refs
this.$refs["form"].validate(valid=>{
//valid为校验后的结果，值为true校验通过，false校验失败
if(valid){
alert("校验通过，可以发起请求")
}else {
alert("校验失败，不可以发起请求")
}
})
}
},
data(){
let checkPwd2 = (rule,value,callback)=>{
if(value.trim().length === 0){
callback(new Error("确认密码不能为空"));
}else if(value !== this.user.password){
callback(new Error("两次输入密码不一致!"))
}else {
callback();
}
}
return {
user:{
username:'',
password:'',
password2:''
},
formRules:{
username: [
{
required:true,message:"用户名不能为空",trigger:"blur"},
{
min:3,max:5,message: "用户名长度在3~5个字符间",trigger: "blur"}
],
password: [
{
required:true,message:"密码不能为空",trigger:'blur'}
],
password2: [
{
validator:checkPwd2,trigger:"blur"}
]
}
}
},
}
script>
<style scoped>
style>
18、表单校验综合案例
返回目录
19、Table表格
返回目录
20、Pagination分页
返回目录
21、Dialog对话框
返回目录
22、实战一、环境准备
返回目录
23、实战二、分页查询
返回目录
24、实战三、添加
返回目录
25、实战四、删除功能
返回目录
26、实战五、更新功能
返回目录
27、Card卡片
返回目录
28、Breadcrumb面包屑
返回目录
29、Steps进度条
返回目录
30、导航菜单的基本使用
返回目录
31、导航菜单的折叠
返回目录
32、导航菜单的select事件
返回目录
33、导航的路由模式
返回目录
34、组合应用
返回目录
35、Avatar头像
返回目录
36、Dropdown下拉菜单
返回目录
37、Alert警告
返回目录
38、页头
返回目录
39、Loading加载
返回目录
40、Message消息提示
返回目录
41、MessageBox弹窗
返回目录
42、Tabs标签页
返回目录
43、Tree树型控件的基本使用
返回目录
44、Tree树型控件的可选择
返回目录
45、Tree树型控件-从服务器获取数据
返回目录
46、Tree树型控件-自定义节点内容
返回目录