el-form
的入门学习
知识点
el-form
标签的核心元素
:model
用于保存表单的数据对象:rules
用于对表单数据对象的校验ref
指定表单对象名称label-width
指定label
的宽度:label-position
指定label
的位置:inline
指定是否同行size
指定所有组件大小
el-form-item
标签的核心元素
label
设置内容prop
指定:rules
中的属性required
指定必填:rules
可以设置当前prop
的校验,一般数值类型的校验可在此单独设置,要指定type:'number'
,与v-model.number
配合使用,注意点有提及size
指定单一组件大小
注意点
:model
的数据属性和:rules
的属性相对应- 一个
el-form-item
中有多个输入框,每个输入框都需要单独嵌套在el-form-item
中,此操作可以单独校验每个输入框 - 日期类型的数据,校验要指定
type:'date'
- 选择框的
value
为数值,校验需要指定type:'number'
- 单选按钮和多选按钮为数值,校验需要指定
type:'number'
- 输入框想要转换成为数值类型,可以使用
v-model.number
,校验需要指定type:number'
- 输入框想要校验邮箱格式,只需要指定
type:'email'
- 嵌套在
el-input
中的el-select
不能实现联动校验,若想实现联动校验,需要@change
自定义调用校验 rules
的简单校验有三个属性:required,message,trigger
,分别为:是否必填,校验失败提示信息,校验时机- 如果要自定义校验规则,需要属性
validator:(rule,value,callback)=>{手动校验代码块}
,rule参数数据很丰富,为一个Object类型的数据,有field,type,validator,required
等属性,value
为:model
属性的值,callback(str)
为要返回的信息 - 单选框,多选框,日期框,选择框的校验时机都应该指定为
change
,符合业务场景 - 动态添加或删除form表单的组件,需要动态配置好
label,prop,rule
的数据,删除按钮需要注意代码let index = array.indexOf(item)和array.splice(index,1)
- 重置按钮:
this.$refs['refName'].resetFields();
,清空了校验,表单数据也恢复初始值 - 校验单个组件:
this.$refs['refName'].validateField('propName');
进行了单个校验 - 校验全部:
this.$refs['refName'].validate(valid=>{});
表单整体校验,一般提交按钮需要触发全部校验
效果图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id='app'>
<el-form :model='formData' label-width='80px' :rules='formRule' ref='formRef'>
<el-form-item label='活动名称' prop='name'>
<el-input v-model='formData.name' placeholder='输入活动名称'></el-input>
</el-form-item>
<el-form-item label='活动区域' prop='area'>
<el-select v-model='formData.area' placeholder='输入活动区域'>
<el-option label='地区1' :value='1'></el-option>
<el-option label='地区2' :value='2'></el-option>
</el-select>
</el-form-item>
<el-form-item label='开始时间' required>
<el-col :span='11'>
<el-form-item prop='date1'>
<el-date-picker v-model='formData.date1' type='date' placeholder='选择日期'></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 v-model='formData.date2' placeholder='选择时间'></el-time-picker>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label='活动天数' prop='dateNum' :rules="[{required:true,message:'活动天数不能为空'},{type:'number',message:'活动天数为数值型'}]">
<el-input v-model.number='formData.dateNum' placeholder='输入活动天数' >
<el-select v-model='formData.dateType' slot='append'>
<el-option label='天' value='D'></el-option>
<el-option label='月' value='M'></el-option>
</el-select>
</el-input>
</el-form-item>
<el-form-item label='及时配送' prop='flag'>
<el-switch v-model='formData.flag'></el-switch>
</el-form-item>
<el-form-item label='活动性质' prop='xingzhi'>
<el-checkbox-group v-model='formData.xingzhi'>
<el-checkbox :label='1'>线上王者开黑</el-checkbox>
<el-checkbox :label='2'>线下旅游</el-checkbox>
<el-checkbox :label='3'>线下聚餐</el-checkbox>
<el-checkbox :label='4'>线下KTV</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label='特殊资源' prop='ziyuan'>
<el-radio-group v-model='formData.ziyuan'>
<el-radio :label='1'>线上礼品赞助</el-radio>
<el-radio :label='2'>线下场地免费</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label='活动形式' prop='xingshi'>
<el-input type='textarea' v-model='formData.xingshi'></el-input>
</el-form-item>
<el-form-item>
<el-button type='primary' @click='onSubmit'>立即创建</el-button>
<el-button @click='resetFields("formRef")'>重置</el-button>
</el-form-item>
</el-form>
<el-form :inline='true' :model='formData2'>
<el-form-item label="审批人">
<el-input v-model='formData2.name' placeholder='审批人'></el-input>
</el-form-item>
<el-form-item label='活动区域'>
<el-select v-model='formData2.area' placeholder='活动区域'>
<el-option label='区域1' :value='1'></el-option>
<el-option label='区域2' :value='2'></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type='primary' @click='onSearch'>查询</el-button>
</el-form-item>
</el-form>
<el-button-group>
<el-button @click='labelPosition="left"'>左对齐</el-button>
<el-button @click='labelPosition="right"'>右对齐</el-button>
<el-button @click='labelPosition="top"'>顶部对齐</el-button>
</el-button-group>
<el-form :label-position='labelPosition' label-width='120px'>
<el-form-item label='用户名'>
<el-input v-model='username'></el-input>
</el-form-item>
<el-form-item label='密码'>
<el-input v-model='password'></el-input>
</el-form-item>
</el-form>
<el-form status-icon :model='formData4' :rules='formRule4' label-width='80px' ref='formRef4'>
<el-form-item prop='pass' label='密码'>
<el-input v-model='formData4.pass'></el-input>
</el-form-item>
<el-form-item prop='checkPass' label='确认密码'>
<el-input v-model='formData4.checkPass'></el-input>
</el-form-item>
<el-form-item prop='age' label='年龄'>
<el-input v-model.Number='formData4.age'></el-input>
</el-form-item>
<el-form-item>
<el-button @click='onSubmit4'>提交</el-button>
<el-button @click='resetFields("formRef4")'>重置</el-button>
</el-form-item>
</el-form>
<el-form status-icon :model='formData5' label-width='80px' ref='formRef5'>
<el-form-item label="邮箱" prop='email'
:rules="[
{required:true,message:'请输入邮箱地址',trigger:'blur'},
{type:'email',message:'请输入正确的邮箱地址',trigger:['change','blur']},
]">
<el-input v-model="formData5.email"></el-input>
</el-form-item>
<el-form-item v-for='(domain,index) in formData5.domains'
:label='"域名"+index'
:key='domain.key'
:prop="'domains.'+index+'.value'"
:rules="{required:true,message:'域名不能为空',trigger:'blur'}">
<el-input v-model="domain.value"></el-input>
<el-button @click='removeDomain(domain)'>删除</el-button>
</el-form-item>
<el-form-item>
<el-button type='primary' @click='onSubmit5'>提交</el-button>
<el-button @click='addDomain'>新增域名</el-button>
<el-button @click='resetFields("formRef5")'>重置</el-button>
</el-form-item>
</el-form>
</div>
</body>
</html>
<style>
.el-input .el-select {
width: 130px;
}
</style>
<script>
new Vue({
el: '#app',
data() {
return {
name: '',
formData: {
name: '',
area: '',
xingzhi: [],
ziyuan: '',
xingshi: '',
date1: '',
date2: '',
dateNum: '',
dateType: '',
},
formRule: {
name: [{ required: true, message: '请输入活动名称', triggle: 'blur' }],
area: [{ type: 'number', required: true, message: '请选择活动区域', triggle: 'change' }],
date1: [{ type: 'date', required: true, message: '请输入活动日期', triggle: 'change' }],
date2: [{ type: 'date', required: true, message: '请输入活动时间', triggle: 'change' }],
xingzhi: [{ type: 'array', required: true, message: '请选择活动性质', triggle: 'change' }],
ziyuan: [{ type: 'number', required: true, message: '请选择特殊资源', triggle: 'change' }],
xingshi: [{ required: true, message: '请选择活动形式', triggle: 'blur' }],
},
formData2: {},
username: '',
password: '',
labelPosition: 'right',
formData4: {
pass: '',
checkPass: '',
age: '',
},
formRule4: {
pass: [{ required: true, validator: this.validatorPass, trigger: 'blur' }],
checkPass: [{ required: true, validator: this.validatorCheckPass, trigger: 'blur' }],
age: [{ required: true, validator: this.validatorAge, trigger: 'blur' }],
},
formData5:{
email:'',
domains:[
{key:"domain0",value:''}
]
},
}
},
methods: {
removeDomain(domain){
let index = this.formData5.domains.indexOf(domain)
if(index!== -1){
this.formData5.domains.splice(index,1)
}
},
addDomain(){
let len = this.formData5.domains.length
this.formData5.domains.push({
key:"domain"+len,
value:'',
})
},
validatorPass(rule, value, callback) {
if (!value) {
callback(new Error('密码不能为空'))
}
if (this.formData4.checkPass != null) {
this.$refs['formRef4'].validateField("checkPass")
}
callback()
},
validatorCheckPass(rule, value, callback) {
if (!value) {
callback(new Error('确认密码不能为空'))
}
if (value != this.formData4.pass) {
callback(new Error('密码不一致'))
}
callback()
},
validatorAge(rule, value, callback) {
if (!value) {
callback(new Error('年龄不能为空'))
}
if (!Number.isInteger(value)) {
callback(new Error('必须为整数型'))
}
if (value < 18) {
callback(new Error('年龄未达标'))
}
callback()
},
onSubmit() {
this.$refs['formRef'].validate(valid => {
if (valid) {
console.log(this.formData)
}
})
},
onSubmit4() {
this.$refs['formRef4'].validate(valid => {
if (valid) {
console.log('success4')
}
})
},
onSubmit5(){
this.$refs['formRef5'].validate(valid => {
if(valid){
console.log("success5")
}
})
},
resetFields(formRef) {
this.$refs[formRef].resetFields();
},
onSearch() {
console.log(this.formData2)
},
}
})
</script>
官网地址
el-form官网地址