VUE前端框架开发之Element-UI组件基础
Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。由饿了么公司前端团队开源。本章我们就来学习Element-UI组件。
14.1 Element-UI简介
Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。由饿了么公司前端团队开源。本章我们结合vue-cli建立项目使用Element-UI。
第一步，安装vue-cli：
npm install vue-cli -g
第二步：创建一个文件夹，并命名，此文件夹作为项目；
第三步：在该文件夹的目录下，初始化项目目录：
vue init webpack
第四步：生成目录后，安装依赖：
npm install
第五步：最后执行命令，启动项目：
npm run dev
图 14- 1 项目启动效果图
项目生成结果如下：
图 14- 2 目录生成说明
第六步：在当前项目路径下，安装Element-UI：
npm install element-ui
第七步：配置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的组件import ElementUI from ‘element-ui’Vue.use(ElementUI)Vue.config.productionTip = false/* eslint-disable no-new */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-row><el-col :span=”24″><div class=”grid-content bg-purple-dark”></div></el-col></el-row><el-row><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=”20″><el-col :span=”6″><div class=”grid-content bg-purple”></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”></div></el-col><el-col :span=”6″><div class=”grid-content bg-purple”></div></el-col></el-row><el-row :gutter=”20″><el-col :span=”4″><div class=”grid-content bg-purple”></div></el-col><el-col :span=”16″><div class=”grid-content bg-purple”></div></el-col><el-col :span=”4″><div class=”grid-content bg-purple”></div></el-col></el-row><el-row :gutter=”20″><el-col :span=”6″ :offset=”6″><div class=”grid-content bg-purple”></div></el-col><el-col :span=”6″ :offset=”6″><div class=”grid-content bg-purple”></div></el-col></el-row></div>
在这启动项目，会因为Eslint规则报错，我们这可以关闭Eslint,方法如下：
第二步
第一步
打开第二步的文件，注释图中代码：
运行代码，效果如图：
图 14- 3 布局效果图
Element-UI以基础的24栏布局，案例中的知识如下：
| 标签或者属性 | 意义 |
| <el-row> | 行 |
| <el-col> | 列 |
| :span | 通过span属性X组合布局 |
| :gutter | 设置列与列之间的间隔 |
| :offset | 设置列的偏移量，span和offset加起来24 |
我们也可以设置列的对齐方式，通过 flex 布局来对分栏进行灵活的对齐。
<div id=”app”><el-row type=”flex” class=”row-bg”><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-row><el-row type=”flex” class=”row-bg” justify=”center”><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-row><el-row type=”flex” class=”row-bg” justify=”end”><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-row><el-row type=”flex” class=”row-bg” justify=”space-between”><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-row><el-row type=”flex” class=”row-bg” justify=”space-around”><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-row></div>
程序运行效果如图：
图 14- 4 排列效果
将 type 属性赋值为 ‘flex’，可以启用 flex 布局，并可通过 justify 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。
start:从左边开始排列；
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
<template><div id=”app”><el-container><el-aside width=”200px”>Aside</el-aside><el-container><el-header>Header</el-header><el-main>Main</el-main><el-footer>Footer</el-footer></el-container></el-container></div></template><script>export default {name: “App”,};</script><style>#app {font-family: “Avenir”, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;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 Container效果图
14.2.3 Button按钮
1.常用的操作按钮
例14-2 App.vue
<template><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-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: “上海市普陀区X西路丹巴路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 | 点击文件列表中已上传的文件时的钩子 | functiоn(file) | — | — |
| on-remove | 文件列表移除文件时的钩子 | functiоn(file, fileList) | — | — |
| on-success | 文件上传成功时的钩子 | functiоn(response, file, fileList) | — | — |
| on-error | 文件上传失败时的钩子 | functiоn(err, file, fileList) | — | — |
| on-progress | 文件上传时的钩子 | functiоn(event, file, fileList) | — | — |
| on-change | 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用 | functiоn(file, fileList) | — | — |
| before-upload | 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。 | functiоn(file) | — | — |
| before-remove | 删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。 | functiоn(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 | 覆盖默认的上传行为，可以自定义上传的实现 | functiоn | — | — |
| disabled | 是否禁用 | boolean | — | false |
| limit | 最大允许上传个数 | number | — | — |
| on-exceed | 文件超出个数限制时的钩子 | functiоn(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表单进行提交。
原创文章，作者：starterknow，如若转载，请注明出处：https://www.starterknow.com/126660.html
starterknow