elemnet ui vue pc端
2020.05.15 总结：
form表单组
<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>
:label-position=“labelPosition”
:inline=“true” 设置 inline 属性可以让表单域变为行内的表单域
关于form表单验证。
关键点： el-form 中加上 :rules=“rules” ，ref=“ruleForm” 节点 data中准备规则。
提交按钮 this.$refs[formName].validate((valid) 方法， 全部符合规则，返回一个valid true。
在true中， 执行接口访问。
重置按钮： this.$refs[formName].resetFields(); 。
prop=“名字” 和v-model 中的名字保持一致。（ 如果不一致， 恢复按钮无效。）
检测： :rules=“rules” 不加， 提交都返回true . 重置按钮 恢复初始状态值。
加上 :rules=“rules” 提交按钮，自动检测规则。 规则中没有对应项，不检测。
prop与规则无对应， 提交不检测。 props与规则对应但是与data不对应，提交检测，但是恢复无效。 所以，规则名字， prop名字，和data中的名字 保持对应。 提交和恢复都会有效。
浏览器输出报错信息
mounted:function(){
throw Error('I was created using a function call!');
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Rt49s1hG-1620956736121)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1597505875896.png)]
console.warn(’[Element Warn]please pass correct props!’); 打印一个提醒
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-E4YowlSl-1620956736123)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1597506152382.png)]
关于element input 回显
只要，对应好value， 自动回显。 涉及到的就是，如果值不对，需要更改为vuleu取值的类型。
blockupReason: "08", // 阻断原因分类
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6WXWHvE6-1620956736126)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1598024433728.png)]
第二种：情况
下拉框无法回显，原因是， 数字好字符串的原因；
选中时保存的字符串形式的数字，那么回显时，也要是字符串式的数字。
isBlockupTotal: "1", // 是否完全中断
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nEbcHDRQ-1620956736128)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1598026326508.png)]
1 介绍
Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。由饿了么公司前端团队开源。
特性：
一致性 Consistency
反馈 Feedback
效率 Efficiency
可控 Controllability
2 安装 与引入
npm i element-ui -S
完整引入
在 main.js 中写入以下内容：
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'
Vue.use(ElementUI)
new Vue({
el: '#app',
render: h => h(App)
})
初始化，引入，所有组件即可以使用。
第一部分：基本部件
1 按钮
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
注意点： el-button 控制基本样式 type=“danger” 控制样式 就是颜色
2 Layout 布局 格栅
格栅布局主要就是行和列的布局
<el-row :gutter="10">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></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>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r63SX1EL-1620956736129)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1596969010688.png)]
参数：
row 行
:gutter=“10” 栅格间隔 作用是 父盒子两侧 加margin -5 子盒子 两侧加pdding -5 px
行标签上还可以设置 flex ，当父盒子 高度比较大时， 控制子盒子上对其，或者是下对齐。
col 列
1 <el-col :span=“6” 总宽度是100% 24均分。 子元素均分。如果大于100%， 另起一行。
注意： 这只是控制宽度。 高度有子盒子的高撑起来。
2 表示 margin-left: 25%; 盒子向右侧推出指定距离。
3. 栅格向右移动格数 推
4 栅格向左移动格数 拉
3 Container 布局容器
快速搭建标准的后台管理系统的 三分布局
4 Color 色彩
四种标准颜色 只是16进制的色值
5 字体
6 Icon 图标
直接通过设置类名为 el-icon-iconName 来使用即可。例如：
<el-button type="primary" icon="el-icon-d-arrow-right">搜索</el-button><i class="el-icon-edit"></i>
通过i 标签， 或者是 el- 的标签内设置 icon=“el-icon-d-arrow-right”。 class名按需查找。
7 Button 按钮
主要按钮
搜索
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| 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 |
解析会加上class名
.el-button 控制高宽
el-button–primary控制颜色
8 Link 文字链接
<el-link :underline="false">无下划线</el-link> <el-link>有下划线</el-link>
就是a 标签
属性有
Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| type | 类型 | string | primary / success / warning / danger / info | default |
| underline | 是否下划线 | boolean | — | true |
| disabled | 是否禁用状态 | boolean | — | false |
| href | 原生 href 属性 | string | — | - |
| icon | 图标类名 | string | — | - |
第二部分： form表单
1 Radio 单选框
基础用法
由于选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。
要使用 Radio 组件，只需要设置v-model绑定变量，选中意味着变量的值为相应 Radio label属性的值，label可以是String、Number或Boolean。
<template> <el-radio v-model="radio" label="1">备选项</el-radio> <el-radio v-model="radio" label="2">备选项</el-radio> </template><script> export default { data () { return { radio: '1' //这个值只会是1,2其中一个值。 }; } }</script>
总结： 使用el 标签， 绑定变量。 data 配置项中给个绑定值。 label控制 只是什么。
禁用状态
单选框不可点击的状态。 但可以赋予初始值，选中。
2 单选框多个组使用
<el-radio-group v-model="radio"> <el-radio :label="1">备选项</el-radio> <el-radio :label="6">备选项</el-radio> <el-radio :label="9">备选项</el-radio> </el-radio-group> <script> export default { data () { return { radio: 1 }; } }</script>
在el-radio-group中绑定v-model， 在el-radio中设置好label即可，无需再给每一个el-radio绑定变量，另外，还提供了change事件来响应变化，它会传入一个参数value。
<el-radio-group v-model="labelPosition" size="small"> <el-radio-button label="left">左对齐</el-radio-button> <el-radio-button label="right">右对齐</el-radio-button> <el-radio-button label="top">顶部对齐</el-radio-button></el-radio-group> data() { return { labelPosition: 'right', }; },
表单验证
Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并 Form-Item 的 prop 属性设置为需校验的字段名即可。
关于表单验证：总结：
<el-form :model="ruleForm" 灌入数据1:rules="rules" 规则2ref="ruleForm" 节点3"> <el-form-item label="活动名称" prop="name" > 4 prop <el-input v-model="ruleForm.name" ></el-input> 5v-model="ruleForm.name </el-form-item>6. 如果是不能为空， 看一下是否有默认值。 有值默认符合条件。
按钮样式
只需要把el-radio元素换成el-radio-button元素即可，此外，Element 还提供了size属性。
<el-radio-group v-model="radio3"> <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>
单选的回调函数
<template> <div class="hello"> <el-radio-group v-model="radio" @change="radio_enent"> <el-radio-button label="上海" class="el-icon-delete"></el-radio-button> <el-radio-button label="北京"></el-radio-button> <el-radio-button label="广州"></el-radio-button> <el-radio-button label="深圳" icon="el-icon-search"></el-radio-button> </el-radio-group> </div></template><script> export default { name: 'HelloWorld', data() { return { radio: '上海' } }, methods:{ radio_enent:(value)=>{ console.log(value); } }}</script>
Radio Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| change | 绑定值变化时触发的事件 | 选中的 Radio label 值 |
3 Checkbox 多选框
基础用法
单独使用可以表示两种状态之间的切换，写在标签中的内容为 checkbox 按钮后的介绍。
在el-checkbox元素中定义v-model绑定变量，单一的checkbox中，默认绑定变量的值会是Boolean，选中为true。
<el-checkbox v-model="checked">备选项</el-checkbox>checked: true
一个dom标签 ，data中给个布尔值。 点击 布尔值变化
禁用状态
设置disabled属性即可。
多选框组
打组， 多选。 和单选类似。 v-model=“checkList” 选中的项，以数组形式自动保存到data中。
<template> <el-checkbox-group v-model="checkList"> <el-checkbox label="复选框 A"></el-checkbox> <el-checkbox label="复选框 B"></el-checkbox> <el-checkbox label="复选框 C"></el-checkbox> <el-checkbox label="禁用" disabled></el-checkbox> <el-checkbox label="选中且禁用" disabled></el-checkbox> </el-checkbox-group></template><script> export default { data () { return { checkList: ['选中且禁用','复选框 A'] }; } };</script>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aLlqEuvp-1620956736131)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1596977055528.png)]
复选框的一键全选
indeterminate 状态
indeterminate 属性用以表示 checkbox 的不确定状态，一般用于实现全选的效果
<template> <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox> <div style="margin: 15px 0;"></div> <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange"> <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox> </el-checkbox-group></template><script> const cityOptions = ['上海', '北京', '广州', '深圳']; export default { 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>
基本用法： 还是用了单个复选框， 和打组复选框。
单选控制 全选。 点击修改data数组。 打组项用v-for=“city in cities” 循环。
可选项目数量的限制
使用 min 和 max 属性能够限制可以被勾选的项目的数量。
在父标签上写属性。
<el-checkbox-group v-model="checkedCities1" :min="1" :max="2">
按钮样式
用法同上，直接更换标签。
按钮事件
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| change | 当绑定值变化时触发的事件 | 更新后的值 |
3 Input 输入框
基础用法
<el-input v-model="input" placeholder="请输入内容"></el-input> input: ''
最简单的用法，放个标签，给个值。
禁用状态
通过 disabled 属性指定是否禁用 input 组件
可清空
使用clearable属性即可得到一个可清空的输入框
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JdijH3RX-1620956736132)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1596979526453.png)]
带 icon图标 的输入框
可以通过 prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增加显示图标，也可以通过 slot 来放置图标。
<el-input placeholder="请选择日期" suffix-icon="el-icon-date" v-model="input2"> </el-input>
prefix-icon和suffix-icon` 控制图标前放还是后放。 图标class 参考 组件图标。
可自适应文本高度的文本域 textarea
复合型输入框
带输入建议
4 Select 选择器
基础用法
总结： v-model的值为当前被选中的el-option的 value 属性值
下拉框： 使用数据分两两部分。 最终选择值的变量存放。
option展示选项的值。
<el-select v-model="value" placeholder="请选择"> <el-option v-for="item in options" // options是data中的数据。 :key="item.value" // key是唯一性标识 :label="item.label"// label是下拉的可以看到的中文名字 :value="item.value">// value是一个选择的字符。 1 0 或者是true等 </el-option> </el-select>
选项是v-for 循环出来的， v-model 绑定一个data的值。
远程搜索
下拉框和翻页混合使用
为了启用远程搜索，需要将filterable和remote设置为true，同时传入一个remote-method。remote-method为一个Function，它会在输入值发生变化时调用，参数为当前输入值。需要注意的是，如果el-option是通过v-for指令渲染出来的，此时需要为el-option添加key属性，且其值需具有唯一性，比如此例中的item.value。
<el-select ref="roadInfo" popper-class="pagina-select" :popper-append-to-body="false" style="width:100%" v-model="epForm.roadInfo" filterable //是否可搜索 true remote //是否为远程搜索 true placeholder="请输入关键词" :remote-method="remoteMethod" // 远程搜索方法 参数为当前输入值 :loading="roadCodeLoading" // 是否正在从远程获取数据 true @change="roadCodeChange" // 选中值发生变化时触发 > <el-option :key="1" :label="测试" :value="1" > </el-option> </el-select>
测试：
5 Cascader 级联选择器
联动下拉框
关键点看下面4个
一个存储选择的值。 [ ] 是一个数组
一个是渲染下拉 下拉数据是分层级的结构
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DWtNWvF5-1620956736132)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1597243120289.png)]
下方是标准数据： 具体看官网
<el-cascader v-model="value" // 选择的值 :options="options" // 联查数据 :props="{ expandTrigger: 'hover' }" // 点击和hover两种 @change="handleChange" // 选择事件 ></el-cascader>export default { data() { return { value: ['一级'], options: [ { value: "zhinan", label: "指南", children: [ { value: "cexiangdaohang", label: "侧向导航", }, { value: "dingbudaohang", label: "顶部导航", }, ], }, ], }, { value: "zujian", label: "组件", children: [ { value: "basic", label: "Basic", children: [ { value: "layout", label: "Layout 布局", }, { value: "color", { value: "radio", label: "Radio 单选框", }, { value: "checkbox", label: "Checkbox 多选框", }; }, methods: { handleChange(value) { console.log(value); }, },};
非标准数据的调整
二级数据如果不是 child键值命名， 则无法使用。
需要自行添加配置项。 props 中配置。
使用props设置value、label、children
从后端拿到arr数据结构：
cityList: [ { id: 1, name: '北京', child: [ id: 11, name: '大兴区', child: [ id: 111, name: '亦庄' ] ] }]
vue文件代码
<el-cascader :options="cityList" :props="optionProps" v-model="selectedOptions" @change="handleChange"></el-cascader>
js
data: { optionProps: { value: 'id', label: 'name', children: 'child' }}
基础多选
为el-select设置multiple属性即可启用多选，此时v-model的值为当前选中值所组成的数组。默认情况下选中值会以 Tag 的形式展现，你也可以设置collapse-tags属性将它们合并为一段文字。
6 Switch 开关
基本用法
绑定v-model到一个Boolean类型的变量。可以使用active-color属性与inactive-color属性来设置开关的背景色。
设置active-value和inactive-value属性，接受Boolean, String或Number类型的值。
<el-switch v-model="value2" active-color="#13ce66" inactive-color="#ff4949"></el-switch><script> export default { data() { return { value2: true } } };</script>
7 TimePicker 日期选择器
使用 el-time-select 标签，分别通过star、end和step指定可选的起始时间、结束时间和步长
总结：1 放置时间标签
2 准备变量结果值存储
<el-time-picker v-model="value2" //存储选择结果的值 :picker-options="{ //限制可选时间范围 selectableRange: '18:30:00 - 20:30:00' }" placeholder="任意时间点"> </el-time-picker> value2: new Date(2016, 9, 10, 18, 40), 一个变量存储选择结果值
@change =‘changeevent’ 写在时间标签内
Events
| 事件名 | 说明 | 参数 |
|---|---|---|
| change | 用户确认选定的值时触发 | 组件绑定值 |
8 DatePicker 日期选择器
和timepicker类似。
选择日
其他日期单位
选择日期范围
日期格式
如果是时间范围，则data是一个数组。
<el-date-picker v-model="value6" type="year" // 控制显示周 年 日 或者显示周 选择器 value-format = 'yyyy-MM-dd-HH-mm' 时间格式 可以自定义 @change='changeevent' 时间确定后的回调函数 > </el-date-picker>
项目使用时间格式
<el-time-picker type="datetime" format="yyyy-MM-dd HH:mm" value-format=" yyyy-MM-dd HH:mm" v-if=" item.type==='time' " v-model="formdata[item.code]" placeholder="时间点" ></el-time-picker>
9 Upload 上传
使用： 放置上传标签
总结： 一个upload标签， 所有的属性和方法都放到里面。
包含接口的调试。
<el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" // 必选参数，上传的地址 :on-preview="handlePreview" 点击文件列表中已上传的文件时的钩子function(file) :on-remove="handleRemove" 文件列表移除文件时的钩子 function(file, fileList) :before-remove="beforeRemove" multiple 是否支持多选文件 :limit="3" 最大允许上传个数 number :show-file-list="false" 已上传图片以列表显示 :on-exceed="handleExceed" 文件超出个数限制时的钩子 function(files, fileList) :file-list="fileList" 上传的文件列表 [], list-type="text" 文件列表的类型text/picture/picture-card 以图片显示还是文字 > <el-button size="small" type="primary">点击上传</el-button> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div></el-upload>
10 Form 表单 综合
由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据
在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker
form
<template> <div><!-- form开始 --> <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-switch v-model="form.delivery"></el-switch> </el-form-item><!-- 第三 个 --> <el-form-item> <el-button type="primary" @click="onSubmit">立即创建</el-button> <el-button>取消</el-button> </el-form-item> </el-form><!-- form结束 --> </div></template><script>export default { data() { return { form: { name: "", region: "", date1: "", date2: "", delivery: false, type: [], resource: "", desc: "", }, }; }, methods: { onSubmit() { console.log("submit!"); }, },};</script>
form使用规则
v-model="formInline.user"一般用于 以数组形式保存form的全部的用户选择的值。
<template> <div><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 { data() { return { formInline: { user: '', region: '' } }; }, methods: { onSubmit() { console.log("submit!"); }, },};</script>
数据绑定
el-form :model=“formInline”
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AYCrEtCe-1620956736133)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1597332771898.png)]
<script>export default { data() { return { formInline: { user: '', region: '' } }; }, methods: { onSubmit() { console.log("submit!"); }, },};</script>
对齐方式
通过设置 label-position 属性可以改变表单域标签的位置，可选值为 top、left，当设为 top 时标签会置于表单域的顶部
<el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign"><el-form> 在form上设置
表单验证
实现校验成功 需要这两个属性配合使用。
:rules=“rules” ref=“ruleForm”
一个注入规则，一个点击时，校验，合格则返回一个布尔值。
:model=“ruleForm” 灌入数据
:rules=“rules” 灌入验证规则
ref=“ruleForm” 获取指定的dom。 注意点： 如果修改变量名，下面按钮的传值也要跟这变，
item项：
prop="name1 是 rules中的name1 验证
v-model=“ruleForm.name”
提交按钮要在form中。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9nAQwwWM-1620956736134)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1597337305932.png)]
resetForm(formName) { 这里接受的时形参。 对应错误将找不到方法。 this.$refs[formName].resetFields(); }
<template> <div><el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="活动名称" prop="name1"> <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 type="fixed-time" 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> <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 { data() { return { ruleForm: { name: '', region: '', date1: '', date2: '', delivery: false, type: [], resource: '', desc: '' }, rules: { name1: [ { 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>
rule规则
:rules 对应规则。 prop 对应data中的值。
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' } ] } { type: 'number', message: 'paramValue必须为数字值'}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rKHLeBUy-1620956736135)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1597338848585.png)]
rule的 item写法
<el-form-item label="年龄" prop="age" :rules='[ { required: true, message: "年龄不能为空" ,trigger: "blur"}, { type: "number", message: "年龄必须为数字值" ,trigger: "blur"}, ]'> <el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></el-input> </el-form-item>
注意点： 双引号和单引号的问题 :rules 对应规则。 prop 对应data中的值。
自定义表单验证
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DxnENwR6-1620956736135)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1597507647163.png)]
<template> <div class="hello"> <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 { data() { var checkAge = (rule, value, callback) => { // console.log(rule) // console.log(value) //输入框的值 // console.log(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>
自定义验证与form验证的区别是data规则自定义部分
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); }; return { ruleForm: { age: "", }, rules: { age: [{ validator: checkAge, trigger: "blur" }], }, }; },
validator 新属性。 用于自定义配置。 和 trigger触发方式
第三部分： Data
1 Table 表格
在table中 prop 是data值
当el-table元素中注入data对象数组后，在el-table-column中用prop属性来对应对象中的键名即可填入数据，用label属性来定义表格的列名。可以使用width属性来定义列宽。
<el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table> tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }
父标签 注入数据
<el-table-column
prop=“name” //注入数据
label=“姓名” // 表格名字
width=“180”>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RzrEhscX-1620956736136)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1597335282253.png)]
2 斑马纹的表格
el-table 中直接放入属性： stripe（ n. 条纹，斑纹；种类）
3 带边框表格
el-table 中直接放入属性： border
4 带状态表格 高亮行背景色
根据数据状态添加背景色
可以通过指定 Table 组件的 row-class-name 属性来为 Table 中的某一行添加 class，表明该行处于某种状态。
<el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName" > methods: { tableRowClassName({row, rowIndex}) { if (row.active === 0) { return 'warning-row'; } else { return 'success-row'; } } },
tableRowClassName 添加事件， 回调参数是每行的数据和index . 每条数据条用一次。 return class名字。
配合 css 区分颜色。
5 固定表头
只要在el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码。
el-table 标签中 添加 height=“150” 一个高度。
6 固定列
横向内容过多时，可选择固定列
固定列需要使用fixed属性，它接受 Boolean 值或者left``right，表示左边固定还是右边固定。
<el-table-column fixed prop="date" label="日期" width="150"></el-table-column>
方法是： 在column中 添加 fixed . 想固定那一列就添加在哪一行。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L0xxTQRL-1620956736136)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1597515790460.png)]
7 传值 操作栏按钮
slot-scope=“scope”
场景： 表格的点击事件中， 传入本行的数据。
<el-table-column fixed="right" label="操作" width="100"> <template slot-scope="scope"> <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button> </template> </el-table-column>
8 固定列和表头
横纵内容过多时，可选择固定列和表头。
固定列和表头可以同时使用，只需要将上述两个属性分别设置好即可。
9 流体高度
当数据量动态变化时，可以为 Table 设置一个最大高度。
通过设置max-height属性为 Table 指定最大高度。此时若表格所需的高度大于最大高度，则会显示一个滚动条。
table 标签中 放置 max-height=“250” 控制最大高度。
10多级表头
只需要在 el-table-column 里面嵌套 el-table-column，就可以实现多级表头。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-glvM9Kew-1620956736137)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1597517626090.png)]
<el-table-column label="地址"> <el-table-column prop="address" label="地址" width="300"></el-table-column> <el-table-column prop="zip" label="邮编" width="120"></el-table-column> <el-table-column fixed="right" label="操作" width="100"> </el-table-column>
column 标签包裹
11 单选 点击变色 行
able 组件提供了单选的支持，只需要配置highlight-current-row属性即可实现单选。之后由current-change事件来管理选中时触发的事件，它会传入currentRow（ 点击行的数据），oldCurrentRow。如果需要显示索引，可以增加一列el-table-column，设置type属性为index即可显示从 1 开始的索引号。
关键点 : el-table 标签中
<el-table ref="singleTable" :data="tableData" highlight-current-row 这一个属性 @current-change="handleCurrentChange" 方法 style="width: 100%">
指定行背景色改变。两种方式：一种是点击表格，所在行变色。 一种是不惦记表格， 函数触发变色。
- 点击表格变色： highlight-current-row 加属性即可。 如果想获取点击行的数据，方法：@current-change=“handleCurrentChange”
handleCurrentChange(val) { console.log(val); this.currentRow_ = val; },
2 函数式变色：
ref="singleTable" table标签加上ref 属性。获取dom指定表格 <div style="margin-top: 20px"> <el-button @click="setCurrent(tableData[3])">选中第二行</el-button> <el-button @click="setCurrent()">取消选择</el-button> </div> methods: { setCurrent(row) { this.$refs.singleTable.setCurrentRow(row); },
表格 首列 index显示
如果需要显示索引，可以增加一列el-table-column，设置type属性为index即可显示从 1 开始的索引号。
<el-table-column type="index" width="50"></el-table-column> <el-table-column property="date" label="日期" width="120"></el-table-column>
12 多选 获取多行的数据
选择多行数据时使用 Checkbox。
实现多选非常简单: 手动添加一个el-table-column，设type属性为selection即可；默认情况下若内容过多会折行显示，若需要单行显示可以使用show-overflow-tooltip属性，它接受一个Boolean，为true时多余的内容会在 hover 时以 tooltip 的形式显示出来
关键点：
手动添加一个el-table-column，设type属性为selection即可。 可以进行多选。 如果想获取选中的几行数据。使用方法
<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange" >
方法 methods :
handleSelectionChange(val) { console.log(val); this.multipleSelection = val; }, data中准备 multipleSelection: [],
函数式 选中几行事件
<div style="margin-top: 20px"> <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button> <el-button @click="toggleSelection()">取消选择</el-button> </div>
methods: { toggleSelection(rows) { if (rows) { rows.forEach((row) => { this.$refs.multipleTable.toggleRowSelection(row); }); } else { this.$refs.multipleTable.clearSelection(); } },
和上面一样。 注意点： 方法使用需要指定tabel 。 ref属性加上。
<el-table
ref=“multipleTable”
13 排序
在列中设置sortable属性即可实现以该列为基准的排序，接受一个Boolean，默认为false。可以通过 Table 的default-sort属性设置默认的排序列和排序顺序。可以使用sort-method或者sort-by使用自定义的排序规则。如果需要后端排序，需将sortable设置为custom，同时在 Table 上监听sort-change事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。在本例中，我们还使用了formatter属性，它用于格式化指定列的值，接受一个Function，会传入两个参数：row和column，可以根据自己的需求进行处理。
第一种： 列排序 ，想那列可以排序，就在列上加上属性：
sortable 表明可以排序
<el-table-column prop="name" label="姓名" sortable width="180"></el-table-column>
第二种： 设置默认排序
:default-sort="{prop: ‘date’, order: ‘descending’}" 设置默认的 排序列 和 排序顺序
<el-table :data="tableData" style="width: 100%" :default-sort="{prop: 'date', order: 'descending'}" > <el-table-column prop="date" label="日期" width="180"></el-table-column> <el-table-column prop="name" label="姓名" sortable width="180"></el-table-column> <el-table-column prop="address" label="地址" :formatter="formatter"></el-table-column> </el-table>
监听排序变化
列设置为可以排序后，监听事件，
<el-table :data="tableData" style="width: 100%" @sort-change='change' > 方法： methods: {change(val){ console.log(val);},
对列数据进行加后缀
对数组显示做处理
在本例中，我们还使用了formatter属性，它用于格式化指定列的值，接受一个Function，会传入两个参数：row和column，可以根据自己的需求进行处理。
想处理哪一行： :formatter=“formatter” 绑定方法;
<el-table :data="tableData" style="width: 100%" @sort-change='change' <el-table-column prop="address" label="地址" :formatter="formatter"></el-table-column> </el-table>
方法， 数据渲染是，自动过滤每一行，进行数据处理。 统一判断加后缀等。比如返回不同的按钮等。
methods: { formatter(row, column) { // console.log(row); 行信息 // console.log(column); 列信息 return row.name+ ' 后缀'; }, },
像如下方法：使用场景
formatter(row, column) { console.log(row); if(row.name=="张三"){ return "危险分子" }else{ return row.address+ ' 后缀'; } },
14 筛选 过滤器
对表格进行筛选，可快速查找到自己想看的数据。
在列中设置filters``filter-method属性即可开启该列的筛选，filters 是一个数组，filter-method是一个方法，它用于决定某些数据是否显示，会传入三个参数：value, row 和 column。
<el-table-column prop="date" label="日期" :filters="[{text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]" :filter-method="filterHandler" ></el-table-column>
完整代码:
<template> <div> <el-button @click="resetDateFilter">清除日期过滤器</el-button> <el-button @click="clearFilter">清除所有过滤器</el-button> <el-table ref="filterTable" :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" sortable width="180" column-key="date" :filters="[{text: '2016-05-20', value: '2016-05-20'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]" :filter-method="filterHandler" ></el-table-column> <el-table-column prop="name" label="姓名" width="180"></el-table-column> <el-table-column prop="address" label="地址" :formatter="formatter"></el-table-column> <el-table-column prop="tag" label="标签" width="100" :filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]" :filter-method="filterTag" filter-placement="bottom-end" > <template slot-scope="scope"> <el-tag :type="scope.row.tag === '家' ? 'primary' : 'success'" disable-transitions >{{scope.row.tag}}</el-tag> </template> </el-table-column> </el-table> </div></template><script>export default { data() { return { tableData: [ { date: "2016-05-02", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄", tag: "家", }, { date: "2016-05-04", name: "王小虎", address: "上海市普陀区金沙江路 1517 弄", tag: "公司", }, { date: "2016-05-01", name: "王小虎", address: "上海市普陀区金沙江路 1519 弄", tag: "家", }, { date: "2016-05-03", name: "王小虎", address: "上海市普陀区金沙江路 1516 弄", tag: "公司", }, ], }; }, methods: { resetDateFilter() { this.$refs.filterTable.clearFilter("date"); }, clearFilter() { this.$refs.filterTable.clearFilter(); }, formatter(row, column) { return row.address; }, filterTag(value, row) { return row.tag === value; }, filterHandler(value, row, column) { const property = column["property"]; return row[property] === value; }, },};</script>
15 自定义列模板 显示组件搭配
自定义列的显示内容，可组合其他组件使用。
通过 Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据，用法参考 demo。
第一种 拦截数据, 加图标
<el-table-column label="日期" width="180"> <template slot-scope="scope"> <i class="el-icon-time"></i> <span style="margin-left: 10px">{{ scope.row.date }}</span> </template> </el-table-column>
第二种 ; 拦截 使用组件 hober悬浮显示
<el-table-column label="姓名" width="180"> <template slot-scope="scope"> <el-popover trigger="hover" placement="top"> <p>姓名: {{ scope.row.name }}</p> <p>住址: {{ scope.row.address }}</p> <div slot="reference" class="name-wrapper"> <el-tag size="medium">{{ scope.row.name }}</el-tag> </div> </el-popover> </template> </el-table-column>
第三种： 操作栏 事件获取行数据
<el-table-column label="操作"> <template slot-scope="scope"> <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button> </template> </el-table-column>
16 展开行
当行内容过多并且不想显示横向滚动条时，可以使用 Table 展开行功能。
过设置 type=“expand” 和 Scoped slot 可以开启展开行功能，el-table-column 的模板会被渲染成为展开行的内容，展开行可访问的属性与使用自定义列模板时的 Scoped slot 相同
总结： 方法是添加一行。 行类型设置 type=“expand”， 里面嵌套一个slot模板，将行数据写入。
<el-table-column type="expand"> <template slot-scope="props"> <el-form label-position="left" inline class="demo-table-expand"> <el-form-item label="店铺地址"> <span>{{ props.row.address }}</span> </el-form-item> <el-form-item label="商品描述"> <span>{{ props.row.desc }}</span> </el-form-item> </el-form> </template> </el-table-column>
17 树形数据与懒加载
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3CJOqnWy-1620956736138)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1597548837166.png)]
支持树类型的数据的显示。当 row 中包含 children 字段时，被视为树形数据。渲染树形数据时，必须要指定 row-key。支持子节点数据异步加载。设置 Table 的 lazy 属性为 true 与加载函数 load 。通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点。children 与 hasChildren 都可以通过 tree-props 配置。
总结： 树形结构的判断首先是数据结构，如下
数据中出现children字段，判断为该行是树形，
{ id: 3, date: '2016-05-01', name: '王二吗', address: '上海市普陀区金沙江路 1519 弄', children: [{ id: 31, date: '2016-05-01', name: '王二', address: '上海市普陀区金沙江路 1519 弄' }, { id: 32, date: '2016-05-01', name: '王二', address: '上海市普陀区金沙江路 1519 弄' }] }
tabel标签中设置 数据参数，和是否默认打开。
default-expand-all :tree-props="{children: 'children_', hasChildren: 'hasChildren'}">
children: 'children_ 设置数据。
18 自定义表头
通过设置 Scoped slot 来自定义表头。
总结： 上边的搜索框和下边的按钮可以分别设置。
方式就是table 上加上过滤条件。
search 是data中的值。 search: “” 。 空就是false.
每一条数据都经过输入框内容的过滤。然后渲染。
<el-table :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase() ) )" style="width: 100%">
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jcho6kD1-1620956736138)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1597550469688.png)]
上边的搜索框和下面的按钮，是透过添加一行。
slot-scope=“scope” 自定义出来的。
<el-table-column align="left"> <template slot="header" slot-scope="scope"> <el-input v-model="search" size="mini" placeholder="输入关键字搜索"/> </template> <template slot-scope="scope"> <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Edit</el-button> <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button> </template> </el-table-column>
完整代码：
<template><div> <el-table :data="tableData.filter(data => data.name.toLowerCase().includes(search.toLowerCase() ) )" style="width: 100%"> <el-table-column label="Date" prop="date"> </el-table-column> <el-table-column label="Name" prop="name"> </el-table-column> <el-table-column align="left"> <template slot="header" slot-scope="scope"> <el-input v-model="search" size="mini" placeholder="输入关键字搜索"/> </template> <template slot-scope="scope"> <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Edit</el-button> <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button> </template> </el-table-column> </el-table></div></template><script> export default { data() { return { tableData: [{ date: '2016-05-02', name: '王二', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }], search: "" } }, methods: { handleEdit(index, row) { console.log(index, row); }, handleDelete(index, row) { console.log(index, row); } }, }</script>
19 表尾合计行
总结： 两种方法，一个自动，一个自定义。
第一个：将show-summary设置为true就会在表格尾部展示合计行默认情况下，对于合计行，第一列不进行数据求合操作，而是显示「合计」二字（可通过sum-text配置），其余列会将本列所有数值进行求合操作，并显示出来。
<el-table :data="tableData" border show-summary sum-text='表名字' style="width: 100%">
第二种：
你也可以定义自己的合计逻辑。使用summary-method并传入一个方法，返回一个数组，这个数组中的各项就会显示在合计行的各列中，具体可以参考本例中的第二个表格。
table 标签中 :summary-method=“getSummaries” 格式化函数。
函数中返回一个处理后的数组。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V0QMqp8D-1620956736139)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1597552635618.png)]
计算方法参照官方案例。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7KjULeGT-1620956736139)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1597552238445.png)]
20 合并行或列
使用情景 : 多行或多列共用一个数据时，可以合并行或列
通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。
总结：
tabel中绑定一个方法： 方法中回调。
:span-method="arraySpanMethod"
方法：
methods: { arraySpanMethod({ row, column, rowIndex, columnIndex }) { if (rowIndex % 2 === 0) { if (columnIndex === 0) { return [1, 2]; // 意思就是 第一行，跨两列。进行合并。 } else if (columnIndex === 1) { return [0, 0]; } } },
21 自定义索引
通过给 type=index 的列传入 index 属性，可以自定义索引。该属性传入数字时，将作为索引的起始值。也可以传入一个方法，它提供当前行的行号（从 0 开始）作为参数，返回值将作为索引展示。
总结： tabel中绑定一个属性。:index=“indexMethod”
方法中 定义一个自定义的逻辑。
methods: {
indexMethod(index) {
return index * 2;
}
2 Pagination 分页
分页标签
分页标签属性控制显示按钮，几个事件，上一页 点击时，下一页点击时。 可以用于调用接口，更换数据。达到渲染的目的。
<el-pagination small layout="prev, pager, next" :total="50"></el-pagination>
3 Badge 标记 消息条数显示
基础用法
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U2FXQzba-1620956736140)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1597554956875.png)]
:value=“n” 写多少就是几条消息
<el-badge :value="12" class="item"> <el-button size="small">评论</el-button></el-badge>
可自定义最大值
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Y2IEwfaP-1620956736141)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1597555078153.png)]
value=“new” 冒号去掉就是绑定文字。
4 Avatar 头像
用图标、图片或者字符的形式展示用户或事物信息。
形象标签
<el-avatar icon="el-icon-user-solid"></el-avatar>
通过 shape 和 size 设置头像的形状和大小。
<el-avatar shape="square" :size="size" :src="squareUrl"></el-avatar>
展示类型
支持三种类型：图标、图片和字符
标签找中放 图片，文字和表情。
<el-avatar icon="el-icon-user-solid"></el-avatar><el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar> <el-avatar> user </el-avatar>
第四部分：Notice提醒
1 Alert 警告
页面中的非浮层元素，不会自动消失。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OgyTNZiP-1620956736142)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1597074945072.png)]
Alert 组件提供四种主题，由type属性指定，默认值为info。 <el-alert title="成功提示的文案" type="success"> </el-alert>
放到页面中就显示。
页面加载，就会显示。点击可以关闭。 适用场景： 页面加载的提醒。
2 Loading 加载
分为三种： table 指令 和服务
局部加载效果
Element 提供了两种调用 Loading 的方法：指令和服务。对于自定义指令v-loading，只需要绑定Boolean即可。
场景1 ： el-table 中的。 充当一个配置项 loading绑定一个data 布尔值。路网项目中使用。
看下面， 直接卸载table中， 布尔值控制。
<el-table v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" :data="tableData" style="width: 100%">
<el-table v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" :data="tableData" style="width: 100%">
整页加载
指令方式
总结：
在按钮中v-loading.fullscreen.lock=“是或者是否” 加入属性。并用一个方法控制 布尔值的 是与否
当使用指令方式时，全屏遮罩需要添加fullscreen修饰符（遮罩会插入至 body 上），此时若需要锁定屏幕的滚动，可以使用lock修饰符；当使用服务方式时，遮罩默认即为全屏，无需额外设置。
dom部分
<el-button type="primary" @click="openFullScreen1" v-loading.fullscreen.lock="fullscreenLoading" > 指令方式 </el-button> data部分控制显示 fullscreenLoading: false 一个方法 openFullScreen1() { this.fullscreenLoading = true; setTimeout(() => { this.fullscreenLoading = false; }, 2000); },
触发方式： 需要一个点击事件。例如按钮来触发
服务方式
比较简单一点： 是需要一个事件。
<el-button type="primary" @click="openFullScreen2"> 服务方式 </el-button>
每次使用，声明一个loadding . loading.close();方法是关闭。
openFullScreen2() { const loading = this.$loading({ lock: true, text: 'Loading', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' }); setTimeout(() => { loading.close(); }, 2000); }
3 Message 消息提示this.$message
总结： 访问错误，直接调用方法。 this.$message(‘参数错误，请重新输入’);
参数type控制显示警告还是成功的样式。
this.$message({ message: '恭喜你，这是一条成功消息', type: 'success' });
可关闭
弹窗可以手动关闭。
常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。
Element 注册了一个$message方法用于调用，Message 可以接收一个字符串或一个 VNode 作为参数，它会被显示为正文内容。
methods: { open() { this.$message('这是一条消息提示'); }, mounted(){ this.openVn() }
就一个方法， 可以直接mounted中调用。 使用方便。 使用场景： 在提交成功时的提醒。 3s后自动消失。也可以主动关闭。
4 MessageBox 弹框 this.$alert
使用： 也是直接调用方法，传入参数。
定位：弹出简单的内容
这里表明： 有三个方法。
alert 只有确定
confirm 确定和取消
prompt prompt() 方法用于显示可提示用户进行输入的对话框。 弹出一个输入框。
从场景上说，MessageBox 的作用是美化系统自带的 alert、confirm 和 prompt
模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、确认消息和提交内容。
从场景上说，MessageBox 的作用是美化系统自带的 alert、confirm 和 prompt，因此适合展示较为简单的内容。如果需要弹出较为复杂的内容，请使用 Dialog。
消息提示
调用$alert方法即可打开消息提示，它模拟了系统的 alert，无法通过按下 ESC 或点击框外关闭。此例中接收了两个参数，message和title。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lp4lj5yK-1620956736142)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1597079854335.png)]
弹出位置是屏幕中间。 使用方法是this.$alert(） 直接调用方法。 和message使用 方法是一样的。
this.$alert('这是一段内容', '标题名称', { confirmButtonText: '确定', callback: action => { console.log(action);// 在这里判断点击了是还是否 this.$message({ type: 'info', message: `action: ${ action }` }); } });
点击确认消息
提示用户确认其已经触发的动作，并询问是否进行此操作时会用到此对话框。
总结： 也是一个方法，类似propose then和catch,分两种情况。
5 Notification 通知
右侧闯入提醒。
悬浮出现在页面角落，显示全局的通知提醒消息。
其他弹窗
注意点：
dialog配置项的写法：
<el-dialog title="填报信息" :visible.sync="eventOrderDialogVisible" :before-close="cancelDialog" custom-class = detailDialog :center = true >
Attributes参数 说明 类型 可选值 默认值visible 是否显示 Dialog，支持 .sync 修饰符 boolean — false
注意加 ： center。 否则报错
1 Dialog 对话框
在保留当前页面状态的情况下，告知用户并承载相关操作。
Dialog 弹出一个对话框，适合需要定制性更大的场景。
基本用法
需要设置visible属性，它接收Boolean，当为true时显示 Dialog。Dialog 分为两个部分：body和footer，footer需要具名为footer的slot。title属性用于定义标题，它是可选的，默认值为空。最后，本例还展示了before-close的用法。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SOdxRr3o-1620956736143)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1597081198974.png)]
弹框层，由一个布尔值控制。 body foot两部分。
body可以构建自己的dom。 可以是form 表单， 可以是表格。
foot两个按钮。
<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button><el-dialog title="提示" 左上角弹窗名字 :visible.sync="dialogVisible" 显示控制 width="30%" 弹窗宽度 :before-close="handleClose" 关闭前的回调> <span>这是一段信息</span> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="dialogVisible = false">确 定</el-button> </span></el-dialog><script> export default { data() { return { dialogVisible: false }; }, methods: { handleClose(done) { this.$confirm('确认关闭？') .then(_ => { done(); }) .catch(_ => {}); } } };</script>
Dialog 两层对话框
如果需要在一个 Dialog 内部嵌套另一个 Dialog，需要使用 append-to-body 属性。
正常情况下，我们不建议使用嵌套的 Dialog，如果需要在页面上同时显示多个 Dialog，可以将它们平级放置。对于确实需要嵌套 Dialog 的场景，我们提供了append-to-body属性。将内层 Dialog 的该属性设置为 true，它就会插入至 body 元素上，从而保证内外层 Dialog 和遮罩层级关系的正确。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OnuqBYpG-1620956736144)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1597591986023.png)]
<el-dialog title="外层 Dialog" :visible.sync="outerVisible"> <el-dialog width="30%" title="内层 Dialog" :visible.sync="innerVisible" append-to-body> <h1>我是二级内容</h1> </el-dialog> <h1>我是一级内容</h1> <div slot="footer" class="dialog-footer"> <el-button @click="outerVisible = false">取 消</el-button> <el-button type="primary" @click="innerVisible = true">打开内层 Dialog</el-button> </div> </el-dialog>
总结：
二级弹窗，就是在原本放一级内容的 区域，有放入要给dialog标签，配置 append-to-body属性。
两个布尔值控制。一个内，一个外。
二级弹窗配置项，和一级一样使用。
<el-dialog width="30%" title="内层 Dialog" :visible.sync="innerVisible" append-to-body> <h1>我是二级内容</h1></el-dialog>
2 Tooltip文字提示
作用： 悬浮就显示
使用方法： tooltip 标签包裹即可。content动态绑定提示内容。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FEDZhElP-1620956736144)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1597081822059.png)]
基础用法
在这里我们提供 9 种不同方向的展示方式，可以通过以下完整示例来理解，选择你要的效果。
<el-tooltip class="item" effect="dark" content="提示文字" placement="bottom-end"> <el-button>下右</el-button> </el-tooltip>
总结： content控制显示内容。placement控制显示方向。
3 Popover 弹出框
基础用法
Popover 的属性与 Tooltip 很类似，它们都是基于Vue-popper开发的，因此对于重复属性，请参考 Tooltip 的文档，在此文档中不做详尽解释。
<el-popover placement="right" width="600" trigger="click"> <el-table :data="gridData"> <el-table-column width="150" property="date" label="日期"></el-table-column> <el-table-column width="100" property="name" label="姓名"></el-table-column> <el-table-column width="300" property="address" label="地址"></el-table-column> </el-table> <el-button slot="reference">click 激活</el-button></el-popover>
总结： 弹窗框，嵌套table。 table渲染的数据灌入使用。 property指定数据键值对。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vWsIbvTC-1620956736145)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1597082580341.png)]
4 Popconfirm 气泡确认框
<el-popconfirm title="这是一段内容确定删除吗？" @onConfirm = 'fn' // 回调> <el-button slot="reference">删除</el-button></el-popconfirm>
Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| onConfirm | 点击确认按钮时触发 | — |
| onCancel | 点击取消按钮时触发 | — |