Element 是一个面向开发人员、设计师和产品经理的基于Vue 2.0 的组件库，提供支持设计资源，帮助您快速打造网站。饿了么前端团队开源。在本章中，您将了解Element-UI 组件。

14.1 Element-UI简介

Element 是一套基于Vue 2.0 的组件库，为开发人员、设计师和产品经理提供支持设计资源，以快速使网站栩栩如生。饿了么前端团队开源。本章我们将结合vue-cli使用Element-UI创建一个项目。

第一步是安装vue-cli。

npm 安装vue-cli -g

步骤2：创建一个文件夹并将其命名为项目。

第三步：用该文件夹的目录初始化项目目录。

vue 初始化Webpack

第四步：生成目录后，安装依赖。

npm安装

第五步：最后运行命令启动项目。

npm 运行开发

图14-1 项目启动时的效果图

项目生成结果如下：

图14-2 目录生成流程

第6 步：在当前项目路径中安装Element-UI。

npm 安装元素ui

步骤7：配置main.js文件。

import Vue from ‘vue’import App from ‘./App’import router from ‘./router’//引入element-ui的样式import ‘element-ui/lib/theme-chalk/index.css’//引入element -ui 组件从’element-ui’Vue.use(ElementUI)Vue.config.ProductionTip=false/* eslint-disable no-new 导入ElementUI */new Vue({el: ‘#app’,router,components: { App } , template: ‘App/’}) 至此，Element-UI 就已经集成到你的vue 项目中了。现在让我们看看基本组件的用法。

14.2基础布局

14.2.1 Layout布局

快速轻松地创建具有基本24 列的布局。首先我们来看看Element-UI是如何布局的。

首先，将以下代码添加到App.vue中。

div id=’app’el-rowel-col :span=’24’div class=’grid-content bg-purple-dark’/div/el-col/el-rowel-rowel-col :span=’12’div 类=’网格内容bg-purple’/div/el-colel-col :span=’12’div class=’网格内容bg-purple-light’/div/el-col/el-rowel-row :gutter=’20’ el-col :span=’6’div class=’grid-content bg-purple’/div/el-colel-col :span=’6’div class=’grid-content bg-purple’/div/el-Colel- col :span=’6’div class=’grid-content bg-purple’/div/el-colel-col :span=’6’div class=’grid-content bg-purple’/div/el-col/el- rowel-row :gutter=’20’el-col :span=’4’div class=’grid-content bg-purple’/div/el-colel-col :span=’16’div class=’grid-content bg-purple ‘/div/el-colel-col :span=’4’div class=’grid-content bg-purple’/div/el-col/el-rowel-row :gutter=’20’el-col :span=’6′ :offset=’6’div class=’grid-content bg-purple’/div/el-colel-col :span=’6’ :offset=’6’div class=’grid-content bg-purple’/div/here 时el-col/el-row/div启动项目，Eslint规则报错。您可以按如下方式关闭Eslint：

第2步

第一步

打开步骤2中的文件并注释图中的代码。

当你运行代码时，你会得到以下效果：

图14-3 渲染布局

Element-UI 使用基本的24 列布局。本例的知识点是：

标签或属性

意义

埃尔线

知道了

埃科尔

列表

:跨度

自由组合布局与span属性

: 天沟

设置列之间的间距

: 偏移量

将列偏移、跨度和偏移总计设置为最多24。

还可以通过flex布局设置列对齐方式，灵活排列列。

div id=’app’el-row type=’flex’ class=’row-bg’el-col :span=’6’div class=’grid-content bg-purple’/div/el-colel-col :span=’6’div class=’grid-content bg-purple-light’/div/el-colel-col :span=’6’div class=’grid-content bg-purple’/div/el-col/el-rowel -row type=’flex’ class=’row-bg’ justify=’center’el-col :span=’6’div class=’grid-content bg-purple’/div/el-colel-col :span=’6 ‘div class=’grid-content bg-purple-light’/div/el-colel-col :span=’6’div class=’grid-content bg-purple’/div/el-col/el-rowel-row type=’flex’ class=’row-bg’ justify=’end’el-col :span=’6’div class=’grid-content bg-purple’/div/el-colel-col :span=’6’div class=’grid-content bg-purple-light’/div/el-colel-col :span=’6’div class=’grid-content bg-purple’/div/el-col/el-rowel-row type=’flex’ class=’row-bg’ justify=’space- Between’el-col :span=’6’div class=’grid-content bg-purple’/div/el-colel-col :span=’6’div class=’grid-content bg-purple-light’/div/el-colel-col :span=’6’div class=’grid-content bg-purple’/div/el-col/el-rowel-row type=’flex’ class=’row-bg’ justify=’space-around’el-col :span=’6’div class=’grid-content bg-purple’/div/el-colel-col :span=’6’div class=’grid-content bg-purple-light’/div/el-colel-col :span=’6’div class=’grid-content bg-purple’/div/el-col/el-row/div 程序效果如下图所示。

图14-4 放置效果

将type 属性指定为’flex’ 可以启用Flex 布局，并且可以通过使用justify 属性指定开始、中心、结束、间距和间距值来定义子元素的布局。

从左边开始：

center: 居中。

end: 从右开始排列

space- Between: 对齐边缘并在项目之间提供相等的间距。

space-around: 每个项目每一侧的空间相等。因此，项目之间的间距是项目和边框之间的间距的两倍。

14.2.2 Container布局容器

用于布局的容器组件。轻松快速地构建页面的基本结构。

el-container：外容器。如果子元素包含el-header 或el-footer，则所有子元素从上到下垂直对齐，否则它们将左右水平对齐。

el-header：顶栏容器。

el-aside：侧边栏容器。

el-main：主区域容器。

el-footer：底行容器。

上面的组件使用了flex布局。使用前请确保您的目标浏览器兼容。而且el-container只有四个子元素，后四个的父元素也只是el-container。

常见页面布局的示例包括：

示例14-1 App.vue

templatediv id=’app’el-containerel-aside width=’200px’Aside/el-asideel-containerel-headerHeader/el-headerel-mainMain/el-mainel-footerFooter/el-footer/el-container/el-container/div/templatescriptexport 默认{name: ‘App’,};/scriptstyle#app {font-family: ‘Avenir’, Helvetica, Arial, sans-serif;-webkit-font-smoothing: 抗锯齿；-moz-osx-font-smoothing: 灰度； text-align: center;color: #2c3e50;margin-top: 60px;}.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程序运行结果如下。

图14-5 渲染容器

14.2.3 Button按钮

1.常用的操作按钮

示例14-2 App.vue

templatediv id=’app’el-rowel-button 默认按钮/el-buttonel-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><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-button type=”primary” icon=”el-icon-share”></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></div></template><script>export default {name: “App”,};</script><style></style>程序的运行结果如下：

图 14- 6 按钮效果图

2.按钮尺寸

Button 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。额外的尺寸：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><el-row><el-button round>默认按钮</el-button><el-button size=”medium” round>中等按钮</el-button><el-button size=”small” round>小型按钮</el-button><el-button size=”mini” round>超小按钮</el-button></el-row>效果图：

图 14- 7 尺寸效果图

3.按钮组

<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>效果图：

图 14- 8 分页按钮组

4.加载中图标

<el-button type=”primary” :loading=”true”>加载中</el-button>
效果图：

图 14- 9 加载中效果图
总结：
参数
说明
类型
可选值
默认值
size
尺寸
string
medium / small / mini
—
type
类型
string
primary / success / warning / danger / info / text
—
plain
是否朴素按钮
boolean
—
false
round
是否圆角按钮
boolean
—
false
circle
是否圆形按钮
boolean
—
false
loading
是否加载中状态
boolean
—
false
disabled
是否禁用状态
boolean
—
false
icon
图标类名
string
—
—
autofocus
是否默认聚焦
boolean
—
false
native-type
原生 type 属性
string
button / submit / reset
button

14.2.4 Link文字链接

例14-3 App.vue
<template><div id=”app”><h3>基础用法</h3><div><el-link href=”https://element.eleme.io” target=”_blank”>默认链接</el-link><el-link type=”primary”>主要链接</el-link><el-link type=”success”>成功链接</el-link><el-link type=”warning”>警告链接</el-link><el-link type=”danger”>危险链接</el-link><el-link type=”info”>信息链接</el-link></div><h3>禁用状态</h3><div><el-link disabled>默认链接</el-link><el-link type=”primary” disabled>主要链接</el-link><el-link type=”success” disabled>成功链接</el-link><el-link type=”warning” disabled>警告链接</el-link><el-link type=”danger” disabled>危险链接</el-link><el-link type=”info” disabled>信息链接</el-link></div><h3>下划线</h3><div><el-link :underline=”false”>无下划线</el-link><el-link>有下划线</el-link></div><h3>图标</h3><div><el-link icon=”el-icon-edit”>编辑</el-link><el-link>查看<i class=”el-icon-view el-icon–right”></i> </el-link></div></div></template><script>export default {name: “App”,};</script><style></style>程序运行效果如果：

图 14- 10 文字链接效果图
总结如下：
参数
说明
类型
可选值
默认值
type
类型
string
primary / success / warning / danger / info
default
underline
是否下划线
boolean
—
true
disabled
是否禁用状态
boolean
—
false
href
原生 href 属性
string
—
–
icon
图标类名
string
—

14.3 Form组件

在实际的项目使用中，我们经常会使用到Form表单元素，本节课我们就来一一讲解表单元素。

14.3.1 Radio单选框

1.基础使用

代码示例：
<template>
<div id=”app”>
<el-radio v-model=”radio” label=”1″>备选项</el-radio>
<el-radio v-model=”radio” label=”2″>备选项</el-radio>
</div>
</template>
<script>
export default {
name: “App”,
data() {
return {
radio: “1”,
};
},
};
</script>
<style>
</style>
程序运行，效果如图：

图 14- 11 单选按钮基础使用
通过以上示例代码，单选按钮选中的值就是label属性对应的值。

禁用状态

示例代码：
<template>
<div id=”app”>
<el-radio disabled v-model=”radio” label=”禁用”>禁用</el-radio>
<el-radio disabled v-model=”radio” label=”选中且禁用”>选中且禁用</el-radio>
</div>
</template>
<script>
export default {
name: “App”,
data() {
return {
radio: “选中且禁用”,
};
},
};
</script>
<style>
</style>
程序运行，效果如图：

图 14- 12 单选按钮禁用
设置disabled 属性，则单选按钮就可成为禁用状态。

单选框组

结合el-radio-group元素和子元素el-radio可以实现单选组，在el-radio-group中绑定v-model，在el-radio中设置好label即可，无需再给每一个el-radio绑定变量，另外，还提供了change事件来响应变化，它会传入一个参数value，示例代码如下：
<template>
<div id=”app”>
<el-radio-group v-model=”radio”>
<el-radio :label=”3″>备选项3</el-radio>
<el-radio :label=”6″>备选项6</el-radio>
<el-radio :label=”9″>备选项9</el-radio>
</el-radio-group>
</div>
</template>
<script>
export default {
name: “App”,
data() {
return {
radio: 3,
};
},
};
</script>
<style>
</style>

图 14- 13 单选按钮组

按钮样式

把单选按钮设置为button样式：
<template>
<div id=”app”>
<div>
<el-radio-group v-model=”radio1″>
<el-radio-button label=”上海”></el-radio-button>
<el-radio-button label=”北京”></el-radio-button>
<el-radio-button label=”广州”></el-radio-button>
<el-radio-button label=”深圳”></el-radio-button>
</el-radio-group>
</div>
<div style=”margin-top: 20px”>
<el-radio-group v-model=”radio2″ size=”medium”>
<el-radio-button label=”上海”></el-radio-button>
<el-radio-button label=”北京”></el-radio-button>
<el-radio-button label=”广州”></el-radio-button>
<el-radio-button label=”深圳”></el-radio-button>
</el-radio-group>
</div>
<div style=”margin-top: 20px”>
<el-radio-group v-model=”radio3″ size=”small”>
<el-radio-button label=”上海”></el-radio-button>
<el-radio-button label=”北京” disabled></el-radio-button>
<el-radio-button label=”广州”></el-radio-button>
<el-radio-button label=”深圳”></el-radio-button>
</el-radio-group>
</div>
<div style=”margin-top: 20px”>
<el-radio-group v-model=”radio4″ disabled size=”mini”>
<el-radio-button label=”上海”></el-radio-button>
<el-radio-button label=”北京”></el-radio-button>
<el-radio-button label=”广州”></el-radio-button>
<el-radio-button label=”深圳”></el-radio-button>
</el-radio-group>
</div>
</div>
</template>
<script>
export default {
name: “App”,
data() {
return {
radio1: “上海”,
radio2: “上海”,
radio3: “上海”,
radio4: “上海”,
};
},
};
</script>
<style>
</style>
程序运行，效果如图：

图 14- 14 按钮样式的单选按钮
el-radio-button可以设置为按钮样式；

带有边框

设置border属性可以渲染为带有边框的单选框。
示例代码：
<template>
<div id=”app”>
<div>
<el-radio v-model=”radio1″ label=”1″ border>备选项1</el-radio>
<el-radio v-model=”radio1″ label=”2″ border>备选项2</el-radio>
</div>
<div style=”margin-top: 20px”>
<el-radio v-model=”radio2″ label=”1″ border size=”medium”
>备选项1</el-radio
>
<el-radio v-model=”radio2″ label=”2″ border size=”medium”
>备选项2</el-radio
>
</div>
<div style=”margin-top: 20px”>
<el-radio-group v-model=”radio3″ size=”small”>
<el-radio label=”1″ border>备选项1</el-radio>
<el-radio label=”2″ border disabled>备选项2</el-radio>
</el-radio-group>
</div>
<div style=”margin-top: 20px”>
<el-radio-group v-model=”radio4″ size=”mini” disabled>
<el-radio label=”1″ border>备选项1</el-radio>
<el-radio label=”2″ border>备选项2</el-radio>
</el-radio-group>
</div>
</div>
</template>
<script>
export default {
name: “App”,
data() {
return {
radio1: “2”,
radio2: “2”,
radio3: “2”,
radio4: “2”,
};
},
};
</script>
<style>
</style>
程序运行，效果如图：

图 14- 15 border边框样式
使用border 可以添加边框样式。

总结

参数
说明
类型
可选值
默认值
value / v-model
绑定值
string / number / boolean
—
—
label
Radio 的 value
string / number / boolean
—
—
disabled
是否禁用
boolean
—
false
border
是否显示边框
boolean
—
false
size
Radio 的尺寸，仅在 border 为真时有效
string
medium / small / mini
—
name
原生 name 属性
string
—
—

14.3.2 Checkbox多选框

1.基础使用

在el-checkbox元素中定义v-model绑定变量，单一的checkbox中，默认绑定变量的值会是Boolean，选中为true。
示例代码如下：
<template>
<div id=”app”>
<!– `checked` 为 true 或 false –>
<el-checkbox v-model=”checked”>备选项</el-checkbox>
</div>
</template>
<script>
export default {
name: “App”,
data() {
return {
checked: true,
};
},
};
</script>
程序运行，效果如图：

图 14- 16 单个复选框效果

禁用状态

多选框不可用状态。设置disabled属性即可。
示例代码：
<template>
<div id=”app”>
<!– `checked` 为 true 或 false –>
<el-checkbox v-model=”checked1″ disabled>备选项1</el-checkbox>
<el-checkbox v-model=”checked2″ disabled>备选项</el-checkbox>
</div>
</template>
<script>
export default {
name: “App”,
data() {
return {
checked1: true,
checked2: false,
};
},
};
</script>
程序运行，效果如图：

图 14- 17 禁用复选框效果图

多选框组

checkbox-group元素能把多个 checkbox 管理为一组，只需要在 Group 中使用v-model绑定Array类型的变量即可。 el-checkbox 的 label属性是该 checkbox 对应的值，若该标签中无内容，则该属性也充当 checkbox 按钮后的介绍。label与数组中的元素值相对应，如果存在指定的值则为选中状态，否则为不选中。
示例代码：
<template>
<div id=”app”>
<!– `checked` 为 true 或 false –>
<el-checkbox v-model=”checked1″ disabled>备选项1</el-checkbox>
<el-checkbox v-model=”checked2″ disabled>备选项</el-checkbox>
</div>
</template>
<script>
export default {
name: “App”,
data() {
return {
checked1: true,
checked2: false,
};
},
};
</script>
程序运行，效果如图：

图 14- 18 复选框组效果图

indeterminate 状态

indeterminate 属性用以表示 checkbox 的不确定状态，一般用于实现全选的效果。
示例代码：
<template>
<div id=”app”>
<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>
</div>
</template>
<script>
const cityOptions = [“上海”, “北京”, “广州”, “深圳”];
export default {
name: “App”,
data() {
return {
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>
程序运行，效果如图：

图 14- 19 全选效果
在这注意，未全选，则indeterminate属性为true，全选的话则为true。

可选项目数量的限制

使用 min 和 max 属性能够限制可以被勾选的项目的数量。
示例代码如下：
<template>
<div id=”app”>
<!– `checked` 为 true 或 false –>
<el-checkbox v-model=”checked1″ disabled>备选项1</el-checkbox>
<el-checkbox v-model=”checked2″ disabled>备选项</el-checkbox>
</div>
</template>
<script>
export default {
name: “App”,
data() {
return {
checked1: true,
checked2: false,
};
},
};
</script>
程序运行，效果如图：

图 14- 20 设置数量效果图

总结

复选框也可以设置按钮样式，使用<el-checkbox-button>即可；
复选框也可以像单选按钮一样加上边框，只需加上border属性即可；
参数
说明
类型
可选值
默认值
value / v-model
绑定值
string / number / boolean
—
—
label
选中状态的值（只有在checkbox-group或者绑定对象类型为array时有效）
string / number / boolean
—
—
true-label
选中时的值
string / number
—
—
false-label
没有选中时的值
string / number
—
—
disabled
是否禁用
boolean
—
false
border
是否显示边框
boolean
—
false
size
Checkbox 的尺寸，仅在 border 为真时有效
string
medium / small / mini
—
name
原生 name 属性
string
—
—
checked
当前是否勾选
boolean
—
false
indeterminate
设置 indeterminate 状态，只负责样式控制
boolean
—
false

14.3.3 Input输入框

1.基础使用

示例代码：
<template>
<div id=”app”>
<h3>基础用法</h3>
<el-input v-model=”input1″ placeholder=”请输入内容”></el-input>
<h3>基础用法，使用disabled属性禁用</h3>
<el-input placeholder=”请输入内容” v-model=”input2″ :disabled=”true”>
</el-input>
<h3>使用clearable属性即可得到一个可清空的输入框</h3>
<el-input placeholder=”请输入内容” v-model=”input3″ clearable> </el-input>
<h3>使用show-password属性即可得到一个可切换显示隐藏的密码框</h3>
<el-input
placeholder=”请输入密码”
v-model=”input4″
show-password
></el-input>
</div>
</template>
<script>
const cityOptions = [“上海”, “北京”, “广州”, “深圳”];
export default {
name: “App”,
data() {
return {
input1: “”,
input2: “”,
input3: “”,
input4: “”,
};
},
};
</script>
程序运行，效果如图：

清空图标
图 14- 21 input输入框的使用

带 icon 的输入框

可以通过 prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增加显示图标，也可以通过 slot 来放置图标。
示例代码：
<template>
<div id=”app”>
<div class=”demo-input-suffix”>
属性方式：
<el-input
placeholder=”请选择日期”
suffix-icon=”el-icon-date”
v-model=”input1″
>
</el-input>
<el-input
placeholder=”请输入内容”
prefix-icon=”el-icon-search”
v-model=”input2″
>
</el-input>
</div>
<div class=”demo-input-suffix”>
slot 方式：
<el-input placeholder=”请选择日期” v-model=”input3″>
<i slot=”suffix” class=”el-input__icon el-icon-date”></i>
</el-input>
<el-input placeholder=”请输入内容” v-model=”input4″>
<i slot=”prefix” class=”el-input__icon el-icon-search”></i>
</el-input>
</div>
</div>
</template>
<script>
const cityOptions = [“上海”, “北京”, “广州”, “深圳”];
export default {
name: “App”,
data() {
return {
input1: “”,
input2: “”,
input3: “”,
input4: “”,
};
},
};
</script>
程序运行，效果如图：

图 14- 22 带图标效果

文本域

用于输入多行文本信息，通过将 type 属性的值指定为 textarea。文本域高度可通过 rows 属性控制。
使用autosize属性可以自适应内容高度。
示例代码：
<template>
<div id=”app”>
<el-input
type=”textarea”
:rows=”2″
placeholder=”请输入内容”
v-model=”textarea”
>
</el-input>
<h3>加入autosize属性，可以自适应高度的文本域</h3>
<el-input
type=”textarea”
autosize
placeholder=”请输入内容”
v-model=”textarea1″
>
</el-input>
<div style=”margin: 20px 0″></div>
<el-input
type=”textarea”
:autosize=”{ minRows: 2, maxRows: 4 }”
placeholder=”请输入内容”
v-model=”textarea2″
>
</el-input>
</div>
</template>
<script>
export default {
name: “App”,
data() {
return {
textarea: “”,
textarea1: “”,
textarea2: “”,
};
},
};
</script>
程序运行，效果如图：

图 14- 23 文本域效果图

复合型输入框

可前置或后置元素，一般为标签或按钮.可通过 slot 来指定在 input 中前置或者后置内容。
slot=”prepend”:前置内容；
slot=”append”：后置内容；
示例代码：
<template>
<div id=”app”>
<div>
<el-input placeholder=”请输入内容” v-model=”input1″>
<template slot=”prepend”>Http://</template>
</el-input>
</div>
<div style=”margin-top: 15px”>
<el-input placeholder=”请输入内容” v-model=”input2″>
<template slot=”append”>.com</template>
</el-input>
</div>
<div style=”margin-top: 15px”>
<el-input
placeholder=”请输入内容”
v-model=”input3″
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>
</template>
<script>
export default {
name: “App”,
data() {
return {
input1: “”,
input2: “”,
input3: “”,
select: “”,
};
},
};
</script>
<style>
.el-select .el-input {
width: 130px;
}
.input-with-select .el-input-group__prepend {
background-color: #fff;
}
</style>
程序运行，效果如图：

图 14- 24 复合型输入框效果图

尺寸

通过设置size的不同的值，可以控制文本框的尺寸；
size = medium/small/mini
示例代码：
<template>
<div id=”app”>
<div class=”demo-input-size”>
<h3>不加入size</h3>
<el-input
placeholder=”请输入内容”
suffix-icon=”el-icon-date”
v-model=”input1″
>
</el-input>
<h3>size=”medium”</h3>
<el-input
size=”medium”
placeholder=”请输入内容”
suffix-icon=”el-icon-date”
v-model=”input2″
>
</el-input>
<h3>size=”small”</h3>
<el-input
size=”small”
placeholder=”请输入内容”
suffix-icon=”el-icon-date”
v-model=”input3″
>
</el-input>
<h3>size=”mini”</h3>
<el-input
size=”mini”
placeholder=”请输入内容”
suffix-icon=”el-icon-date”
v-model=”input4″
>
</el-input>
</div>
</div>
</template>
<script>
export default {
name: “App”,
data() {
return {
input1: “”,
input2: “”,
input3: “”,
input4: “”,
};
},
};
</script>
程序运行，效果如图：

图 14- 25 尺寸效果图

带输入建议

根据输入内容提供对应的输入建议。autocomplete 是一个可带输入建议的输入框组件，fetch-suggestions 是一个返回输入建议的方法属性，如 querySearch(queryString, cb)，在该方法中你可以在你的输入建议数据准备好时通过 cb(data) 返回到 autocomplete 组件中。
示例代码：
<template>
<div id=”app”>
<el-row class=”demo-autocomplete”>
<el-col :span=”12″>
<el-autocomplete
class=”inline-input”
v-model=”state1″
:fetch-suggestions=”querySearch”
placeholder=”请输入内容”
></el-autocomplete>
</el-col>
<el-col :span=”12″>
<h3>自定义模板</h3>
<el-autocomplete
popper-class=”my-autocomplete”
v-model=”state”
:fetch-suggestions=”querySearch”
placeholder=”请输入内容”
>
<i class=”el-icon-edit el-input__icon” slot=”suffix”> </i>
<template slot-scope=”{ item }”>
<div class=”name”>{{ item.value }}</div>
<span class=”addr”>{{ item.address }}</span>
</template>
</el-autocomplete>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
name: “App”,
data() {
return {
restaurants: [],
state1: “”,
state: “”,
};
},
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: “上海市长宁区金钟路968号1幢18号楼一层商铺18-101”,
},
{ value: “贡茶”, address: “上海市长宁区金钟路633号” },
{
value: “豪大大香鸡排超级奶爸”,
address: “上海市嘉定区曹安公路曹安路1685号”,
},
{
value: “茶芝兰（奶茶，手抓饼）”,
address: “上海市普陀区同普路1435号”,
},
{ value: “十二泷町”, address: “上海市北翟路1444弄81号B幢-107” },
{ value: “星移浓缩咖啡”, address: “上海市嘉定区新郁路817号” },
{ value: “阿姨奶茶/豪大大”, address: “嘉定区曹安路1611号” },
{ value: “新麦甜四季甜品炸鸡”, address: “嘉定区曹安公路2383弄55号” },
{
value: “Monica摩托主题咖啡店”,
address: “嘉定区江桥镇曹安公路2409号1F，2383弄62号1F”,
},
{
value: “浮生若茶（凌空soho店）”,
address: “上海长宁区金钟路968号9号楼地下一层”,
},
{ value: “NONO JUICE 鲜榨果汁”, address: “上海市长宁区天山西路119号” },
{ value: “CoCo都可(北新泾店）”, address: “上海市长宁区仙霞西路” },
{
value: “快乐柠檬（神州智慧店）”,
address: “上海市长宁区天山西路567号1层R117号店铺”,
},
{
value: “Merci Paul cafe”,
address: “上海市普陀区光复西路丹巴路28弄6号楼819”,
},
{
value: “猫山王（西郊百联店）”,
address: “上海市长宁区仙霞西路88号第一层G05-F01-1-306”,
},
{ value: “枪会山”, address: “上海市普陀区棕榈路” },
{ value: “纵食”, address: “元丰天山花园(东门) 双流路267号” },
{ value: “钱记”, address: “上海市长宁区天山西路” },
{ value: “壹杯加”, address: “上海市长宁区通协路” },
{
value: “唦哇嘀咖”,
address: “上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元”,
},
{ value: “爱茜茜里(西郊百联)”, address: “长宁区仙霞西路88号1305室” },
{
value: “爱茜茜里(近铁广场)”,
address:
“上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺”,
},
{
value: “鲜果榨汁（金沙江路和美广店）”,
address: “普陀区金沙江路2239号金沙和美广场B1-10-6”,
},
{
value: “开心丽果（缤谷店）”,
address: “上海市长宁区威宁路天山路341号”,
},
{ value: “超级鸡车（丰庄路店）”, address: “上海市嘉定区丰庄路240号” },
{ value: “妙生活果园（北新泾店）”, address: “长宁区新渔路144号” },
{ value: “香宜度麻辣香锅”, address: “长宁区淞虹路148号” },
{
value: “凡仔汉堡（老真北路店）”,
address: “上海市普陀区老真北路160号”,
},
{ value: “港式小铺”, address: “上海市长宁区金钟路968号15楼15-105室” },
{ value: “蜀香源麻辣香锅（剑河路店）”, address: “剑河路443-1” },
{ value: “北京饺子馆”, address: “长宁区北新泾街道天山西路490-1号” },
{
value: “饭典*新简餐（凌空SOHO店）”,
address: “上海市长宁区金钟路968号9号楼地下一层9-83室”,
},
{
value: “焦耳·川式快餐（金钟路店）”,
address: “上海市金钟路633号地下一层甲部”,
},
{ value: “动力鸡车”, address: “长宁区仙霞西路299弄3号101B” },
{ value: “浏阳蒸菜”, address: “天山西路430号” },
{ value: “四海游龙（天山西路店）”, address: “上海市长宁区天山西路” },
{
value: “樱花食堂（凌空店）”,
address: “上海市长宁区金钟路968号15楼15-105室”,
},
{ value: “壹分米客家传统调制米粉(天山店)”, address: “天山西路428号” },
{
value: “福荣祥烧腊（平溪路店）”,
address: “上海市长宁区协和路福泉路255弄57-73号”,
},
{
value: “速记黄焖鸡米饭”,
address: “上海市长宁区北新泾街道金钟路180号1层01号摊位”,
},
{ value: “红辣椒麻辣烫”, address: “上海市长宁区天山西路492号” },
{
value: “(小杨生煎)西郊百联餐厅”,
address: “长宁区仙霞西路88号百联2楼”,
},
{ value: “阳阳麻辣烫”, address: “天山西路389号” },
{
value: “南拳妈妈龙虾盖浇饭”,
address: “普陀区金沙江路1699号鑫乐惠美食广场A13”,
},
];
},
},
mounted() {
this.restaurants = this.loadAll();
},
};
</script>
<style scoped>
li {
line-height: normal;
padding: 7px;
}
.name {
text-overflow: ellipsis;
overflow: hidden;
}
.addr {
font-size: 12px;
color: #b4b4b4;
}
.highlighted .addr {
color: #ddd;
}
</style>
程序运行，效果如图：

图 14- 26 自带建议输入框效果

图 14- 27 自定义模板效果图
在案例中，使用template模板标签可以自定义建议的模板；

输入长度限制

maxlength 和 minlength 是原生属性，用来限制输入框的字符长度，其中字符长度是用 Javascript 的字符串长度统计的。对于类型为 text 或 textarea 的输入框，在使用 maxlength 属性限制最大输入长度的同时，可通过设置 show-word-limit 属性来展示字数统计。
示例代码：
<template>
<div id=”app”>
<el-input
type=”text”
placeholder=”请输入内容”
v-model=”text”
maxlength=”10″
show-word-limit
>
</el-input>
<div style=”margin: 20px 0″></div>
<el-input
type=”textarea”
placeholder=”请输入内容”
v-model=”textarea”
maxlength=”30″
show-word-limit
>
</el-input>
</div>
</template>
<script>
export default {
name: “App”,
data() {
return {
text: “”,
textarea: “”,
};
},
};
</script>
程序运行，效果如图：

图 14- 28 展示字数统计效果图

总结

参数
说明
类型
可选值
默认值
type
类型
string
text，textarea 和其他 原生 input 的 type 值
text
value / v-model
绑定值
string / number
—
—
maxlength
原生属性，最大输入长度
number
—
—
minlength
原生属性，最小输入长度
number
—
—
show-word-limit
是否显示输入字数统计，只在 type = “text” 或 type = “textarea” 时有效
boolean
—
false
placeholder
输入框占位文本
string
—
—
clearable
是否可清空
boolean
—
false
show-password
是否显示切换密码图标
boolean
—
false
disabled
禁用
boolean
—
false
size
输入框尺寸，只在 type!=”textarea” 时有效
string
medium / small / mini
—
prefix-icon
输入框头部图标
string
—
—
suffix-icon
输入框尾部图标
string
—
—
rows
输入框行数，只对 type=”textarea” 有效
number
—
2
autosize
自适应内容高度，只对 type=”textarea” 有效，可传入对象，如，{ minRows: 2, maxRows: 6 }
boolean / object
—
false
autocomplete
原生属性，自动补全
string
on, off
off
auto-complete
下个主版本弃用
string
on, off
off
name
原生属性
string
—
—
readonly
原生属性，是否只读
boolean
—
false
max
原生属性，设置最大值
—
—
—
min
原生属性，设置最小值
—
—
—
step
原生属性，设置输入字段的合法数字间隔
—
—
—
resize
控制是否能被用户缩放
string
none, both, horizontal, vertical
—
autofocus
原生属性，自动获取焦点
boolean
true, false
false
form
原生属性
string
—
—
label
输入框关联的label文字
string
—
—
tabindex
输入框的tabindex
string
–
–
validate-event
输入时是否触发表单的校验
boolean
–
true

14.3.4 InputNumber计算器

仅允许输入标准的数字值，可定义范围。

1.使用

<template>
<div id=”app”>
<h3>基础使用</h3>
<el-input-number
v-model=”num1″
@change=”handleChange”
:min=”1″
:max=”10″
label=”描述文字”
></el-input-number>
<h3>
禁用状态，disabled属性接受一个Boolean，设置为true即可禁用整个组件，如果你只需要控制数值在某一范围内，可以设置min属性和max属性，不设置min和max时，最小值为
0。
</h3>
<el-input-number v-model=”num2″ :disabled=”true”></el-input-number>
<h3>步数，设置step属性可以控制步长，接受一个Number。</h3>
<el-input-number v-model=”num3″ :step=”2″></el-input-number>
<h3>
严格步数，step-strictly属性接受一个Boolean。如果这个属性被设置为true，则只能输入步数的倍数。
</h3>
<el-input-number v-model=”num4″ :step=”2″ step-strictly></el-input-number>
<h3>
精度，precision 的值必须是一个非负整数，并且不能小于 step 的小数位数。
</h3>
<el-input-number
v-model=”num5″
:precision=”2″
:step=”0.1″
:max=”10″
></el-input-number>
<h3>尺寸，提供了 medium、small、mini 三种尺寸的数字输入框</h3>
<el-input-number size=”medium” v-model=”num6″></el-input-number>
<el-input-number size=”small” v-model=”num7″></el-input-number>
<el-input-number size=”mini” v-model=”num8″></el-input-number>
<h3>按钮位置，设置 controls-position 属性可以控制按钮位置。</h3>
<el-input-number
v-model=”num9″
controls-position=”right”
@change=”handleChange”
:min=”1″
:max=”10″
></el-input-number>
</div>
</template>
<script>
export default {
name: “App”,
data() {
return {
num1: 0,
num2: 0,
num3: 0,
num4: 0,
num5: 0,
num6: 0,
num7: 0,
num8: 0,
num9: 0,
};
},
};
</script>
程序运行，效果如图：


图 14- 29 效果图

2.总结

参数
说明
类型
可选值
默认值
value / v-model
绑定值
number
—
0
min
设置计数器允许的最小值
number
—
-Infinity
max
设置计数器允许的最大值
number
—
Infinity
step
计数器步长
number
—
1
step-strictly
是否只能输入 step 的倍数
boolean
—
false
precision
数值精度
number
—
—
size
计数器尺寸
string
large, small
—
disabled
是否禁用计数器
boolean
—
false
controls
是否使用控制按钮
boolean
—
true
controls-position
控制按钮位置
string
right
–
name
原生属性
string
—
—
label
输入框关联的label文字
string
—
—
placeholder
输入框默认 placeholder
string
–
–

14.3.5 Select选择器

当选项过多时，使用下拉菜单展示并选择内容。

基础使用

适用广泛的基础单选。v-model的值为当前被选中的el-option的 value 属性值。
核心代码如下：
<template>
<div id=”app”>
<el-select v-model=”value” placeholder=”请选择”>
<el-option
v-for=”item in options”
:key=”item.value”
:label=”item.label”
:value=”item.value”
>
</el-option>
</el-select>
</div>
</template>
<script>
export default {
name: “App”,
data() {
return {
options: [
{
value: “选项1”,
label: “黄金糕”,
},
{
value: “选项2”,
label: “双皮奶”,
},
{
value: “选项3”,
label: “蚵仔煎”,
},
{
value: “选项4”,
label: “龙须面”,
},
{
value: “选项5”,
label: “北京烤鸭”,
},
],
value: “”,
};
},
};
</script>
程序运行，效果如下图：

图 14- 30 下拉框效果图

禁用状态

为el-select设置disabled属性，则整个选择器不可用。
核心代码如下：
<el-select v-model=”value” placeholder=”请选择” disabled>
<el-option
v-for=”item in options”
:key=”item.value”
:label=”item.label”
:value=”item.value”
>
</el-option>
</el-select>

基础多选

<el-select
v-model=”value”
multiple
collapse-tags
style=”margin-left: 20px”
placeholder=”请选择”
>
<el-option
v-for=”item in options”
:key=”item.value”
:label=”item.label”
:value=”item.value”
>
</el-option>
</el-select>
为el-select设置multiple属性即可启用多选，此时v-model的值为当前选中值所组成的数组。默认情况下选中值会以 Tag 的形式展现，你也可以设置collapse-tags属性将它们合并为一段文字。
核心代码如下：

图 14- 31 设置多选

自定义模板

将自定义的 HTML 模板插入el-option的 slot 中即可。
核心代码如下：
<el-select v-model=”value” placeholder=”请选择”>
<el-option
v-for=”item in cities”
:key=”item.value”
:label=”item.label”
:value=”item.value”>
<span style=”float: left”>{{ item.label }}</span>
<span style=”float: right; color: #8492a6; font-size: 13px”>{{ item.value }}</span>
</el-option>
</el-select>
程序运行效果如图：

图 14- 32 自定义模板效果图

分组

使用el-option-group对备选项进行分组，它的label属性为分组名。
核心代码如下：
<template>
<div id=”app”>
<el-select v-model=”value” placeholder=”请选择”>
<el-option-group
v-for=”group in options”
:key=”group.label”
:label=”group.label”
>
<el-option
v-for=”item in group.options”
:key=”item.value”
:label=”item.label”
:value=”item.value”
>
</el-option>
</el-option-group>
</el-select>
</div>
</template>
<script>
export default {
name: “App”,
data() {
return {
options: [
{
label: “热门城市”,
options: [
{
value: “Shanghai”,
label: “上海”,
},
{
value: “Beijing”,
label: “北京”,
},
],
},
{
label: “城市名”,
options: [
{
value: “Chengdu”,
label: “成都”,
},
{
value: “Shenzhen”,
label: “深圳”,
},
{
value: “Guangzhou”,
label: “广州”,
},
{
value: “Dalian”,
label: “大连”,
},
],
},
],
value: “”,
};
},
};
</script>
程序运行效果如下图：

图 14- 33 分组效果

搜索

为el-select添加filterable属性即可启用搜索功能。默认情况下，Select 会找出所有label属性包含输入值的选项。如果希望使用其他的搜索逻辑，可以通过传入一个filter-method来实现。filter-method为一个Function，它会在输入值发生变化时调用，参数为当前输入值。
核心代码如下：
<el-select v-model=”value” filterable placeholder=”请选择”>
<el-option
v-for=”item in options”
:key=”item.value”
:label=”item.label”
:value=”item.value”>
</el-option>
</el-select>
程序运行效果如下图：

图 14- 34 搜索效果

创建条目

使用allow-create属性即可通过在输入框中输入文字来创建新的条目。注意此时filterable必须为真。本例还使用了default-first-option属性，在该属性打开的情况下，按下回车就可以选中当前选项列表中的第一个选项，无需使用鼠标或键盘方向键进行定位。
核心代码如下：
<el-select
v-model=”value”
multiple
filterable
allow-create
default-first-option
placeholder=”请选择文章标签”>
<el-option
v-for=”item in options”
:key=”item.value”
:label=”item.label”
:value=”item.value”>
</el-option>
</el-select>
程序运行效果如下图：

图 14- 35 自创条目效果

14.3.6 Cascader级联选择器

当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。

基础使用

只需为 Cascader 的options属性指定选项数组即可渲染出一个级联选择器。通过props.expandTrigger可以定义展开子级菜单的触发方式。
示例代码：
<template>
<div id=”app”>
<div class=”block”>
<span class=”demonstration”>默认 click 触发子菜单</span>
<el-cascader
v-model=”value1″
:options=”options”
@change=”handleChange”
></el-cascader>
</div>
<div class=”block”>
<span class=”demonstration”>hover 触发子菜单</span>
<el-cascader
v-model=”value2″
:options=”options”
:props=”{ expandTrigger: ‘hover’ }”
@change=”handleChange”
></el-cascader>
</div>
</div>
</template>
<script>
export default {
name: “App”,
data() {
return {
value1: [],
value2: [],
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 lang=”” scoped>
.block {
float: left;
}
</style>
运行程序，效果如图：

图 14- 36 级联菜单

禁用状态

通过在数据源中设置 disabled 字段来声明该选项是禁用的。该属性也可以在子集中添加。

加入该属性，则禁用该选项
图 14- 37 设置禁用
本例中，options指定的数组中的第一个元素含有disabled: true键值对，因此是禁用的。在默认情况下，Cascader 会检查数据中每一项的disabled字段是否为true，如果你的数据中表示禁用含义的字段名不为disabled，可以通过props.disabled属性来指定。当然，value、label和children这三个字段名也可以通过同样的方式指定。

可清空

通过 clearable 设置输入框可清空。
核心代码如下：
<el-cascader :options=”options” clearable></el-cascader>
效果如图：

仅显示最后一级

可以仅在输入框中显示选中项最后一级的标签，而不是选中项所在的完整路径。
属性show-all-levels定义了是否显示完整的路径，将其赋值为false则仅显示最后一级。
核心代码如下：
<el-cascader :options=”options” :show-all-levels=”false”></el-cascader>

可多选

可通过 props.multiple = true 来开启多选模式。在开启多选模式后，默认情况下会展示所有已选中的选项的Tag，你可以使用collapse-tags来折叠Tag。
核心代码如下：

在data中设置props
加入props属性
图 14- 38 多选代码
也可以设置折叠选项，只需要加入collapse-tags，核心代码如下：
<el-cascader
v-model=”value1″
:options=”options”
@change=”handleChange”
:props=”props”
collapse-tags
></el-cascader>

任意选择一级选项

在单选模式下，你只能选择叶子节点；而在多选模式下，勾选父节点真正选中的都是叶子节点。启用该功能后，可让父子节点取消关联，选择任意一级选项。可通过 props.checkStrictly = true 来设置父子节点取消选中关联，从而达到选择任意一级选项的目的。
核心代码如下：
<div class=”block”>
<span class=”demonstration”>单选选择任意一级选项</span>
<el-cascader
:options=”options”
:props=”{ checkStrictly: true }”
clearable></el-cascader>
</div>
<div class=”block”>
<span class=”demonstration”>多选选择任意一级选项</span>
<el-cascader
:options=”options”
:props=”{ multiple: true, checkStrictly: true }”
clearable></el-cascader>
</div>
程序运行，单选选择效果如图：

图 14- 39 单选父节点消失效果
程序运行，多选效果如下图：

可以点击关闭父节点
图 14- 40 多选效果如图

动态加载

当选中某一级时，动态加载该级下的选项。通过lazy开启动态加载，并通过lazyload来设置加载数据源的方法。lazyload方法有两个参数，第一个参数node为当前点击的节点，第二个resolve为数据加载完成的回调(必须调用)。为了更准确的显示节点的状态，还可以对节点数据添加是否为叶子节点的标志位 (默认字段为leaf，可通过props.leaf修改)，否则会简单的以有无子节点来判断是否为叶子节点。
核心代码如下：
<el-cascader :props=”props”></el-cascader>
<script>
let id = 0;
export default {
data() {
return {
props: {
lazy: true,
lazyLoad (node, resolve) {
const { level } = node;
setTimeout(() => {
const nodes = Array.from({ length: level + 1 })
.map(item => ({
value: ++id,
label: `选项${id}`,
leaf: level >= 2
}));
// 通过调用resolve将子节点数据返回，通知组件数据加载完成
resolve(nodes);
}, 1000);
}
}
};
}
};
</script>

可搜索

可以快捷地搜索选项并选择。将filterable赋值为true即可打开搜索功能，默认会匹配节点的label或所有父节点的label(由show-all-levels决定)中包含输入值的选项。你也可以用filter-method自定义搜索逻辑，接受一个函数，第一个参数是节点node，第二个参数是搜索关键词keyword，通过返回布尔值表示是否命中。
核心代码如下：
<div class=”block”>
<span class=”demonstration”>单选可搜索</span>
<el-cascader
placeholder=”试试搜索：指南”
:options=”options”
filterable></el-cascader>
</div>
<div class=”block”>
<span class=”demonstration”>多选可搜索</span>
<el-cascader
placeholder=”试试搜索：指南”
:options=”options”
:props=”{ multiple: true }”
filterable></el-cascader>
</div>
程序运行，效果如图：

图 14- 41 搜索效果

自定义节点内容

可以自定义备选项的节点内容。可以通过scoped slot对级联选择器的备选项的节点内容进行自定义，scoped slot会传入两个字段 node 和 data，分别表示当前节点的 Node 对象和数据。
核心代码：
<el-cascader :options=”options”>
<template slot-scope=”{ node, data }”>
<span>{{ data.label }}</span>
<span v-if=”!node.isLeaf”> ({{ data.children.length }}) </span>
</template>
</el-cascader>

级联面板

级联面板是级联选择器的核心组件，与级联选择器一样，有单选、多选、动态加载等多种功能。
核心代码如下：
<el-cascader-panel :options=”options”></el-cascader-panel>
和级联选择器一样，通过options来指定选项，也可通过props来设置多选、动态加载等功能。

14.3.7 Switch开关

表示两种相互对立的状态间的切换，多用于触发「开/关」。

基础使用

绑定v-model到一个Boolean类型的变量。可以使用active-color属性与inactive-color属性来设置开关的背景色。
使用active-text属性与inactive-text属性来设置开关的文字描述。
设置active-value和inactive-value属性，接受Boolean, String或Number类型的值。
设置disabled属性，接受一个Boolean，设置true即可禁用。
示例代码：
<template>
<div id=”app”>
<h3>基础使用</h3>
<el-switch v-model=”value1″ active-color=”#13ce66″ inactive-color=”#ff4949″>
</el-switch>
<h3>文字描述</h3>
<el-switch v-model=”value2″ active-text=”按月付费” inactive-text=”按年付费”>
</el-switch>
<el-switch
style=”display: block”
v-model=”value3″
active-color=”#13ce66″
inactive-color=”#ff4949″
active-text=”按月付费”
inactive-text=”按年付费”
>
</el-switch>
<h3>扩展的 value 类型</h3>
<el-tooltip :content=”‘Switch value: ‘ + value” placement=”top”>
<el-switch
v-model=”value4″
active-color=”#13ce66″
inactive-color=”#ff4949″
active-value=”100″
inactive-value=”0″
>
</el-switch>
</el-tooltip>
<h3>禁用状态</h3>
<el-switch v-model=”value5″ disabled> </el-switch>
</div>
</template>
<script>
export default {
name: “App”,
data() {
return {
value1: true,
value2: true,
value3: true,
value4: true,
value5: true,
};
},
};
</script>
<style lang=”” scoped>
</style>
程序运行，效果如图：

图 14- 42 开关效果图

14.3.8 日期时间选择器

1.TimePicker时间选择器

固定时间点

提供几个固定的时间点供用户选择。使用 el-time-select 标签，分别通过start、end和step指定可选的起始时间、结束时间和步长。
示例代码如下：
<template>
<div id=”app”>
<el-time-select
v-model=”value”
:picker-options=”{
start: ’08:30′,
step: ’00:15′,
end: ’18:30′,
}”
placeholder=”选择时间”
>
</el-time-select>
</div>
</template>
<script>
export default {
name: “App”,
data() {
return {
value: “”,
};
},
};
</script>
程序运行，效果如图：

图 14- 43 固定时间选择点

任意时间点

可以选择任意时间；使用 el-time-picker 标签，通过selectableRange限制可选时间范围。提供了两种交互方式：默认情况下通过鼠标滚轮进行选择，打开arrow-control属性则通过界面上的箭头进行选择。
示例代码如下：
<template>
<div id=”app”>
<el-time-picker
v-model=”value1″
:picker-options=”{
selectableRange: ’18:30:00 – 20:30:00′,
}”
placeholder=”任意时间点”
>
</el-time-picker>
<el-time-picker
arrow-control
v-model=”value2″
:picker-options=”{
selectableRange: ’18:30:00 – 20:30:00′,
}”
placeholder=”任意时间点”
>
</el-time-picker>
</div>
</template>
<script>
export default {
name: “App”,
data() {
return {
value1: new Date(2016, 9, 10, 18, 40),
value2: new Date(2016, 9, 10, 18, 40),
};
},
};
</script>
程序运行，效果如图：

图 14- 44 使用箭头选择效果图

固定时间范围

若先选择开始时间，则结束时间内备选项的状态会随之改变。
示例代码如下：
<template>
<div id=”app”>
<el-time-select
placeholder=”起始时间”
v-model=”startTime”
:picker-options=”{
start: ’08:30′,
step: ’00:15′,
end: ’18:30′,
}”
>
</el-time-select>
<el-time-select
placeholder=”结束时间”
v-model=”endTime”
:picker-options=”{
start: ’08:30′,
step: ’00:15′,
end: ’18:30′,
minTime: startTime,
}”
>
</el-time-select>
</div>
</template>
<script>
export default {
name: “App”,
data() {
return {
startTime: “”,
endTime: “”,
};
},
};
</script>
程序运行，效果如图：

图 14- 45 固定时间起始范围

任意时间范围

可选择任意的时间范围。添加is-range属性即可选择时间范围，同样支持arrow-control属性。
示例代码如下：
<template>
<div id=”app”>
<el-time-picker
is-range
v-model=”value1″
range-separator=”至”
start-placeholder=”开始时间”
end-placeholder=”结束时间”
placeholder=”选择时间范围”
>
</el-time-picker>
<el-time-picker
is-range
arrow-control
v-model=”value2″
range-separator=”至”
start-placeholder=”开始时间”
end-placeholder=”结束时间”
placeholder=”选择时间范围”
>
</el-time-picker>
</div>
</template>
<script>
export default {
name: “App”,
data() {
return {
value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
value2: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
};
},
};
</script>
程序运行，效果如图：

图 14- 46 选择任意时间范围

DateTimePicker日期时间选择器

在同一个选择器里选择日期和时间。DateTimePicker 由 DatePicker 和 TimePicker 派生，Picker Options 或者其他选项可以参照 DatePicker 和 TimePicker。

日期和时间点

通过设置type属性为datetime，即可在同一个选择器里同时进行日期和时间的选择。快捷选项通过shortcuts进行设置，默认时间通过default-time属性进行设置。
示例代码：
<template>
<div id=”app”>
<div class=”block”>
<span class=”demonstration”>默认</span>
<el-date-picker
v-model=”value1″
type=”datetime”
placeholder=”选择日期时间”
>
</el-date-picker>
</div>
<div class=”block”>
<span class=”demonstration”>带快捷选项</span>
<el-date-picker
v-model=”value2″
type=”datetime”
placeholder=”选择日期时间”
align=”right”
:picker-options=”pickerOptions”
>
</el-date-picker>
</div>
<div class=”block”>
<span class=”demonstration”>设置默认时间</span>
<el-date-picker
v-model=”value3″
type=”datetime”
placeholder=”选择日期时间”
default-time=”12:00:00″
>
</el-date-picker>
</div>
</div>
</template>
<script>
export default {
name: “App”,
data() {
return {
pickerOptions: {
shortcuts: [
{
text: “今天”,
onClick(picker) {
picker.$emit(“pick”, new Date());
},
},
{
text: “昨天”,
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() – 3600 * 1000 * 24);
picker.$emit(“pick”, date);
},
},
{
text: “一周前”,
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() – 3600 * 1000 * 24 * 7);
picker.$emit(“pick”, date);
},
},
],
},
value1: “”,
value2: “”,
value3: “”,
};
},
};
</script>
<style lang=”” scoped>
.block {
float: left;
}
</style>
程序运行，效果如图：

设置了快捷时间选择
图 14- 47 设置日期和时间

日期和时间范围

设置type为datetimerange即可选择日期和时间范围。
示例代码：
<template>
<div id=”app”>
<div class=”block”>
<span class=”demonstration”>默认</span>
<el-date-picker
v-model=”value1″
type=”datetime”
placeholder=”选择日期时间”
>
</el-date-picker>
</div>
<div class=”block”>
<span class=”demonstration”>带快捷选项</span>
<el-date-picker
v-model=”value2″
type=”datetime”
placeholder=”选择日期时间”
align=”right”
:picker-options=”pickerOptions”
>
</el-date-picker>
</div>
<div class=”block”>
<span class=”demonstration”>设置默认时间</span>
<el-date-picker
v-model=”value3″
type=”datetime”
placeholder=”选择日期时间”
default-time=”12:00:00″
>
</el-date-picker>
</div>
</div>
</template>
<script>
export default {
name: “App”,
data() {
return {
pickerOptions: {
shortcuts: [
{
text: “今天”,
onClick(picker) {
picker.$emit(“pick”, new Date());
},
},
{
text: “昨天”,
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() – 3600 * 1000 * 24);
picker.$emit(“pick”, date);
},
},
{
text: “一周前”,
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() – 3600 * 1000 * 24 * 7);
picker.$emit(“pick”, date);
},
},
],
},
value1: “”,
value2: “”,
value3: “”,
};
},
};
</script>
<style lang=”” scoped>
.block {
float: left;
}
</style>
程序运行，效果如图：

图 14- 48 设置日期和时间选择范围

默认的起始和结束时刻

使用datetimerange进行范围选择时，在日期选择面板中选定起始与结束的日期，默认会使用该日期的00:00:00作为起始与结束的时刻；通过选项default-time可以控制选中起始与结束日期时所使用的具体时刻。default-time接受一个数组，数组每项值为字符串，形如12:00:00，其中第一项控制起始日期的具体时刻，第二项控制结束日期的具体时刻。
示例代码：
<template>
<div id=”app”>
<div class=”block”>
<span class=”demonstration”>起始日期时刻为 12:00:00</span>
<el-date-picker
v-model=”value1″
type=”datetimerange”
start-placeholder=”开始日期”
end-placeholder=”结束日期”
:default-time=”[’12:00:00′]”
>
</el-date-picker>
</div>
<div class=”block”>
<span class=”demonstration”
>起始日期时刻为 12:00:00，结束日期时刻为 08:00:00</span
>
<el-date-picker
v-model=”value2″
type=”datetimerange”
align=”right”
start-placeholder=”开始日期”
end-placeholder=”结束日期”
:default-time=”[’12:00:00′, ’08:00:00′]”
>
</el-date-picker>
</div>
</div>
</template>
<script>
export default {
name: “App”,
data() {
return {
value1: “”,
value2: “”,
};
},
};
</script>
<style lang=”” scoped>
.block {
float: left;
}
</style>
程序运行，效果如图：

图 14- 49 设置默认的起始时间

14.3.9 Upload上传

1.普通上传

通过 slot 你可以传入自定义的上传按钮类型和文字提示。可通过设置limit和on-exceed来限制上传文件的个数和定义超出限制时的行为。可通过设置before-remove来阻止文件移除操作。
示例代码：
<template>
<div id=”app”>
<el-upload
class=”upload-demo”
action=”https://jsonplaceholder.typicode.com/posts/”
:on-preview=”handlePreview”
:on-remove=”handleRemove”
:before-remove=”beforeRemove”
multiple
:limit=”3″
:on-exceed=”handleExceed”
: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>
</template>
<script>
export default {
name: “App”,
data() {
return {
fileList: [
{
name: “food.jpeg”,
url: “https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360×360/format/webp/quality/100”,
},
{
name: “food2.jpeg”,
url: “https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360×360/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) {
return this.$confirm(`确定移除 ${file.name}？`);
},
},
};
</script>
<style lang=”” scoped>
</style>
程序运行，效果如图：

图 14- 50 上传效果图

文件缩略图

使用 scoped-slot 去设置缩略图模版。
示例代码：
<template>
<div id=”app”>
<el-upload action=”#” list-type=”picture-card” :auto-upload=”false”>
<i slot=”default” class=”el-icon-plus”></i>
<div slot=”file” slot-scope=”{ file }”>
<img class=”el-upload-list__item-thumbnail” :src=”file.url” alt=”” />
<span class=”el-upload-list__item-actions”>
<span
class=”el-upload-list__item-preview”
@click=”handlePictureCardPreview(file)”
>
<i class=”el-icon-zoom-in”></i>
</span>
<span
v-if=”!disabled”
class=”el-upload-list__item-delete”
@click=”handleDownload(file)”
>
<i class=”el-icon-download”></i>
</span>
<span
v-if=”!disabled”
class=”el-upload-list__item-delete”
@click=”handleRemove(file)”
>
<i class=”el-icon-delete”></i>
</span>
</span>
</div>
</el-upload>
<el-dialog :visible.sync=”dialogVisible”>
<img width=”100%” :src=”dialogImageUrl” alt=”” />
</el-dialog>
</div>
</template>
<script>
export default {
name: “App”,
data() {
return {
dialogImageUrl: “”,
dialogVisible: false,
disabled: false,
};
},
methods: {
handleRemove(file) {
console.log(file);
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
handleDownload(file) {
console.log(file);
},
},
};
</script>
<style lang=”” scoped>
</style>
程序运行，效果如图：

图 14- 51 上传缩略图效果

3.总结

参数
说明
类型
可选值
默认值
action
必选参数，上传的地址
string
—
—
headers
设置上传的请求头部
object
—
—
multiple
是否支持多选文件
boolean
—
—
data
上传时附带的额外参数
object
—
—
name
上传的文件字段名
string
—
file
with-credentials
支持发送 cookie 凭证信息
boolean
—
false
show-file-list
是否显示已上传文件列表
boolean
—
true
drag
是否启用拖拽上传
boolean
—
false
accept
接受上传的文件类型（thumbnail-mode 模式下此参数无效）
string
—
—
on-preview
点击文件列表中已上传的文件时的钩子
function(file)
—
—
on-remove
文件列表移除文件时的钩子
function(file, fileList)
—
—
on-success
文件上传成功时的钩子
function(response, file, fileList)
—
—
on-error
文件上传失败时的钩子
function(err, file, fileList)
—
—
on-progress
文件上传时的钩子
function(event, file, fileList)
—
—
on-change
文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
function(file, fileList)
—
—
before-upload
上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。
function(file)
—
—
before-remove
删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。
function(file, fileList)
—
—
list-type
文件列表的类型
string
text/picture/picture-card
text
auto-upload
是否在选取文件后立即进行上传
boolean
—
true
file-list
上传的文件列表, 例如: [{name: ‘food.jpg’, url: ‘https://xxx.cdn.com/xxx.jpg’}]
array
—
[]
http-request
覆盖默认的上传行为，可以自定义上传的实现
function
—
—
disabled
是否禁用
boolean
—
false
limit
最大允许上传个数
number
—
—
on-exceed
文件超出个数限制时的钩子
function(files, fileList)
—
–

14.3.10 Form表单

由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。

典型表单

在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker。
示例代码：
<template>
<div id=”app”>
<el-form ref=”form” :model=”form” label-width=”80px”>
<el-form-item label=”活动名称”>
<el-input v-model=”form.name”></el-input>
</el-form-item>
<el-form-item label=”活动区域”>
<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
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>
</template>
<script>
export default {
name: “App”,
data() {
return {
form: {
name: “”,
region: “”,
date1: “”,
date2: “”,
delivery: false,
type: [],
resource: “”,
desc: “”,
},
};
},
methods: {
onSubmit() {
console.log(“submit!”);
},
},
};
</script>
<style lang=”” scoped>
</style>
程序运行，效果如图：

图 14- 52 表单效果图

行内表单

当垂直方向空间受限且表单较简单时，可以在一行内放置表单。设置 inline 属性可以让表单域变为行内的表单域。
示例代码：
<template>
<div id=”app”>
<el-form :inline=”true” :model=”formInline” class=”demo-form-inline”>
<el-form-item label=”审批人”>
<el-input v-model=”formInline.user” placeholder=”审批人”></el-input>
</el-form-item>
<el-form-item label=”活动区域”>
<el-select v-model=”formInline.region” placeholder=”活动区域”>
<el-option label=”区域一” value=”shanghai”></el-option>
<el-option label=”区域二” value=”beijing”></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type=”primary” @click=”onSubmit”>查询</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: “App”,
data() {
return {
formInline: {
user: “”,
region: “”,
},
};
},
methods: {
onSubmit() {
console.log(“submit!”);
},
},
};
</script>
<style lang=”” scoped>
</style>
程序运行，效果如图：

图 14- 53 单行表单效果

表单验证

在防止用户犯错的前提下，尽可能让用户更早地发现并纠正错误。Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。校验规则参见 async-validator。
示例代码：
<template>
<div id=”app”>
<el-form
:model=”ruleForm”
:rules=”rules”
ref=”ruleForm”
label-width=”100px”
class=”demo-ruleForm”
>
<el-form-item label=”活动名称” prop=”name”>
<el-input v-model=”ruleForm.name”></el-input>
</el-form-item>
<el-form-item label=”活动区域” prop=”region”>
<el-select v-model=”ruleForm.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=”活动时间” required>
<el-col :span=”11″>
<el-form-item prop=”date1″>
<el-date-picker
type=”date”
placeholder=”选择日期”
v-model=”ruleForm.date1″
style=”width: 100%”
></el-date-picker>
</el-form-item>
</el-col>
<el-col class=”line” :span=”2″>-</el-col>
<el-col :span=”11″>
<el-form-item prop=”date2″>
<el-time-picker
placeholder=”选择时间”
v-model=”ruleForm.date2″
style=”width: 100%”
></el-time-picker>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label=”即时配送” prop=”delivery”>
<el-switch v-model=”ruleForm.delivery”></el-switch>
</el-form-item>
<el-form-item label=”活动性质” prop=”type”>
<el-checkbox-group v-model=”ruleForm.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=”特殊资源” prop=”resource”>
<el-radio-group v-model=”ruleForm.resource”>
<el-radio label=”线上品牌商赞助”></el-radio>
<el-radio label=”线下场地免费”></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label=”活动形式” prop=”desc”>
<el-input type=”textarea” v-model=”ruleForm.desc”></el-input>
</el-form-item>
<el-form-item>
<el-button type=”primary” @click=”submitForm(‘ruleForm’)”
>立即创建</el-button
>
<el-button @click=”resetForm(‘ruleForm’)”>重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: “App”,
data() {
return {
ruleForm: {
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” },
],
date1: [
{
type: “date”,
required: true,
message: “请选择日期”,
trigger: “change”,
},
],
date2: [
{
type: “date”,
required: true,
message: “请选择时间”,
trigger: “change”,
},
],
type: [
{
type: “array”,
required: true,
message: “请至少选择一个活动性质”,
trigger: “change”,
},
],
resource: [
{ required: true, message: “请选择活动资源”, trigger: “change” },
],
desc: [{ required: true, message: “请填写活动形式”, trigger: “blur” }],
},
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert(“submit!”);
} else {
console.log(“error submit!!”);
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
},
};
</script>
<style lang=”” scoped>
</style>
程序运行，效果如图：

图 14- 54 校验效果图

自定义校验规则

这个例子中展示了如何使用自定义验证规则来完成密码的二次验证。
示例代码：
<template>
<div id=”app”>
<el-form
:model=”ruleForm”
status-icon
:rules=”rules”
ref=”ruleForm”
label-width=”100px”
class=”demo-ruleForm”
>
<el-form-item label=”密码” prop=”pass”>
<el-input
type=”password”
v-model=”ruleForm.pass”
autocomplete=”off”
></el-input>
</el-form-item>
<el-form-item label=”确认密码” prop=”checkPass”>
<el-input
type=”password”
v-model=”ruleForm.checkPass”
autocomplete=”off”
></el-input>
</el-form-item>
<el-form-item label=”年龄” prop=”age”>
<el-input v-model.number=”ruleForm.age”></el-input>
</el-form-item>
<el-form-item>
<el-button type=”primary” @click=”submitForm(‘ruleForm’)”
>提交</el-button
>
<el-button @click=”resetForm(‘ruleForm’)”>重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: “App”,
data() {
var checkAge = (rule, value, callback) => {
if (!value) {
return callback(new Error(“年龄不能为空”));
}
setTimeout(() => {
if (!Number.isInteger(value)) {
callback(new Error(“请输入数字值”));
} else {
if (value < 18) {
callback(new Error(“必须年满18岁”));
} else {
callback();
}
}
}, 1000);
};
var validatePass = (rule, value, callback) => {
if (value === “”) {
callback(new Error(“请输入密码”));
} else {
if (this.ruleForm.checkPass !== “”) {
this.$refs.ruleForm.validateField(“checkPass”);
}
callback();
}
};
var validatePass2 = (rule, value, callback) => {
if (value === “”) {
callback(new Error(“请再次输入密码”));
} else if (value !== this.ruleForm.pass) {
callback(new Error(“两次输入密码不一致!”));
} else {
callback();
}
};
return {
ruleForm: {
pass: “”,
checkPass: “”,
age: “”,
},
rules: {
pass: [{ validator: validatePass, trigger: “blur” }],
checkPass: [{ validator: validatePass2, trigger: “blur” }],
age: [{ validator: checkAge, trigger: “blur” }],
},
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert(“submit!”);
} else {
console.log(“error submit!!”);
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
},
};
</script>
<style lang=”” scoped>
</style>
程序运行，效果如图：

图 14- 55 自定义校验效果
本例还使用status-icon属性为输入框添加了表示校验结果的反馈图标。自定义校验 callback 必须被调用。

总结

参数
说明
类型
可选值
默认值
model
表单数据对象
object
—
—
rules
表单验证规则
object
—
—
inline
行内表单模式
boolean
—
false
label-position
表单域标签的位置，如果值为 left 或者 right 时，则需要设置 label-width
string
right/left/top
right
label-width
表单域标签的宽度，例如 ’50px’。作为 Form 直接子元素的 form-item 会继承该值。支持 auto。
string
—
—
label-suffix
表单域标签的后缀
string
—
—
hide-required-asterisk
是否隐藏必填字段的标签旁边的红色星号
boolean
—
false
show-message
是否显示校验错误信息
boolean
—
true
inline-message
是否以行内形式展示校验信息
boolean
—
false
status-icon
是否在输入框中显示校验结果反馈图标
boolean
—
false
validate-on-rule-change
是否在 rules 属性改变后立即触发一次验证
boolean
—
true
size
用于控制该表单内组件的尺寸
string
medium / small / mini
—
disabled
是否禁用该表单内的所有组件。若设置为 true，则表单内组件上的 disabled 属性不再生效
boolean
—
false

14.4 本章小结

在main.js中，引入Element-UI的样式和Element-UI即可使用Element-UI。会使用el-row，以及el-col进行基础的布局，灵活使用span,offset,gutter等属性灵活调整。掌握Container常用的标签:el-container，el-header，el-aside，el-main，el-footer。掌握按钮常用的使用，会调整按钮的尺寸以及大小，会使用按钮组。掌握常用的文字链接属性。Form表单是我们在实践项目中经常使用的，灵活掌握各个表单元素。

14.5 理论试题与实践练习

1.编程题

1.1 使用element-ui写一个常用网页布局。
1.2 使用本章所有的表单元素写一个Form表单进行提交。