element ui动态增减表单项目验证问题及实现

element ui 官网 Form组件提供了一个动态增加表单项及验证的demo，但其过于简单，以至于网上存在很多动态增加表单项，无法正确验证的问题，按官网方法尝试多次无效后，果断甩开官方写法，完全换一种方式实现，代码如下：

	<el-form :model="dynamicForm" ref="dynamicValidateForm" label-width="140px" class="demo-dynamic">
			<div v-for="(item) in dynamicValidateForm.field" :key="item.rnd" class="new-item">
				<el-row style="text-align:right">
				<span class="ryDelete" @click="handleThisItem(item)">删除</span>
				</el-row>
				<el-form-item :label="'荣誉名称' + item.rnd" :prop="'honor' + (item.rnd)" :rules="[{required: true, message: '名称不能为空', trigger: 'blur'}, {validator: checkAge}]">
				<el-input v-model="dynamicForm[`honor${item.rnd}`]"></el-input>
				</el-form-item>
				<el-form-item :label="'签到时间' + item.rnd" :prop="'time' + (item.rnd)" :rules="[{required: true, message: '时间不能为空', trigger: 'blur'}]">
				<el-input v-model="dynamicForm[`time${item.rnd}`]"></el-input>
				</el-form-item>
				<el-form-item :label="'颁发部门' + item.rnd" :prop="'depart' + (item.rnd)" :rules="[{required: true, message: '部门不能为空', trigger: 'blur'}]">
				<el-input v-model="dynamicForm[`depart${item.rnd}`]"></el-input>
				</el-form-item>
			</div>
			<el-row>
				<el-col :span="24">
					<el-button type="plain" @click="addDomain">新增荣誉</el-button>
					<el-button type="plain" @click="saveHonor">保存荣誉</el-button>
				</el-col>
			</el-row>
		</el-form>

data () {
			const checkAge = (rule, value, callback) => {
				console.log('custom')
				if (!value) {
					return callback(new Error('年龄不能为空'))
				}
				setTimeout(() => {
					if (!Number.isInteger(value)) {
						callback(new Error('请输入数字值'))
					} else {
						if (value < 18) {
						callback(new Error('必须年满18岁'))
						} else {
						callback()
						}
					}
				}, 1000)
			}
			return {
				radio: '1',
				name: 0,
				dynamicValidateForm: {
					field: []
				},
				dynamicForm: {},
				checkAge: checkAge
			}
		},
		created () {
			this.addDomain()
		},
		methods: {
			addDomain () {
				const rnd = Math.floor(Math.random() * 1000000)
				this.dynamicValidateForm.field.push({
					rnd
				})
				const honorName = 'honor' + rnd
				const timeName = 'time' + rnd
				const departName = 'depart' + rnd
				this.$set(this.dynamicForm, honorName)
				this.$set(this.dynamicForm, timeName)
				this.$set(this.dynamicForm, departName)
			},
			saveHonor () {
				const ret = []
				this.dynamicValidateForm.field.forEach(item => {
					ret.push({
						honor: this.dynamicForm[`honor${item.rnd}`],
						time: this.dynamicForm[`time${item.rnd}`],
						depart: this.dynamicForm[`depart${item.rnd}`]
					})
				})
				console.log('ret', ret)
			},
			handleThisItem (obj) {
				let index = -1
				this.dynamicValidateForm.field.forEach((item, i) => {
				if (item.rnd === obj.rnd) {
					index = i
				}
				})
				this.dynamicValidateForm.field.splice(index, 1)
				this.$delete(this.dynamicForm, `honor${obj.rnd}`)
				this.$delete(this.dynamicForm, `time${obj.rnd}`)
				this.$delete(this.dynamicForm, `depart${obj.rnd}`)
			},
		}

官网增减表单项采用的是对象嵌套数组的方法，这样虽然方便，但验证写法及其麻烦

本demo可以直接使用，简单扩充字段即可

标签：const,field,rnd,item,dynamicForm,ui,element,obj,表单
来源： https://www.cnblogs.com/diantao/p/14167888.html