el-form的入门学习
<!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="/element-ui/lib/theme-chalk/">
<script src="/npm/vue/dist/"></script>
<script src="/element-ui/lib/"></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='' placeholder='输入活动名称'></el-input>
</el-form-item>
<el-form-item label='活动区域' prop='area'>
<el-select v-model='' 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 ='' placeholder='输入活动天数' >
<el-select v-model='' 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=''></el-switch>
</el-form-item>
<el-form-item label='活动性质' prop='xingzhi'>
<el-checkbox-group v-model=''>
<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=''>
<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=''></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='' placeholder='审批人'></el-input>
</el-form-item>
<el-form-item label='活动区域'>
<el-select v-model='' 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=''></el-input>
</el-form-item>
<el-form-item prop='checkPass' label='确认密码'>
<el-input v-model=''></el-input>
</el-form-item>
<el-form-item prop='age' label='年龄'>
<el-input =''></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=""></el-input>
</el-form-item>
<el-form-item v-for='(domain,index) in '
:label='"域名"+index'
:key=''
:prop="'domains.'+index+'.value'"
:rules="{required:true,message:'域名不能为空',trigger:'blur'}">
<el-input v-model=""></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>