elementui 使用el-form表单组件动态校验的方法、动态表单的自定义校验

动态校验主要是看 :prop 中的变量是否配置正确

• activeList. : 为被循环的数组 formData的键名
• index : 问遍历的索引值
• .listValue : 为下面 v-model 后台绑定的 item.listValue 的 listValue

<div v-for='(item,index) in formData.activeList'>
	<el-form-item
		:prop="'activeList.'+index+'.listValue'"
		:rules="[{required:true, message: '该数据不能为空'}]"
	>
		<el-input v-model="item.listValue"></el-input>		
	</el-form-item>
</div>

// data中的数据
formData: {
	...
	activeList: [
	{
		listValue: '',
		...
	},
	...
	]
}

自定义动态校验

<div v-for='(item,index) in formData.activeList'>
	<el-form-item
		:prop="'activeList.'+index+'.listValue'"
		:rules="rules.listValue"
	>
		<el-input v-model="item.listValue"></el-input>		
	</el-form-item>
</div>

data() {
	// data中的数据
	let validListValue = (rule, value, callback) => {
		if (!value) return callback(new Error("不能为空！"));
		if (!Number.isInteger(value))
			return callback(new Error("请输入数字！"));
		...
		callback();
	};
	return {
		rules: {
			...
			listValue: [{
					validator: validListValue,
					trigger: "blur"
				}
				...
			]
		}
	}
}