要实现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

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐