elementUI表单项动态添加校验方法

要实现element动态表单项需要使用v-for标签，关键点是 :rules=“item.rules”

表单：

<el-form ref="form" :model="form" >
	<el-form-item 
		v-for="(item,index) in form.list " 
		:prop="item.prop" 
		:label="item.label" 
		:rules="item.rules" 
		:key="index">
	</el-form-item>
</el-form>

data数据：

data(){
	return{
		form:{
			list:[{prop:'',label:'',rules:[]}]
		},
		//校验对象
        //校验必输项
        checkRequired:{required: true, message: "此项为必填项，不能为空", trigger: "blur"},
        //校验长度
        checkLong:{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
        //校验日期
        checkDate:{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }
	};
}

methods:

methods:{
	//动态添加校验规则
	addRules(){
		let colRules =[]
		if(判断条件){
			colRules.push(this.checkRequired)
		}
		if(判断条件){
			colRules.push(this.checkDate)
		}
		this.form.list.push({prop:'birthday',label:'生日',rules:colRules})
	}
}

如果想添加自定义校验方法也是可以的，即在data(){}里添加校验方法，在return{}里声明，然后在方法里使用，详情见：https://blog.csdn.net/dong4hang_CSDN/article/details/122009067