Vue搭配element实现动态表单，并且加验证

Vue搭配element实现动态表单，并且加验证

现在我们实现一个Vue搭配element实现一个动态表单的效果，可对每一个表单项进行验证，删除。用的是element的form表单

<el-form
			ref="addForm"
			:model="addForm"
			label-width="80px"
		>
			<div v-for="(item, index) in addForm.secondPayments" :key="item.key">
				<el-col :span="23" class="formTop">
					<p style="cursor: pointer;" @click="changeShow(index)">
						<i v-show="item.show === true" class="el-icon-arrow-up" />
						<i v-show="item.show === false" class="el-icon-arrow-down" />
						规格{{ index+1 }}
					</p>
					<el-button @click="deleteFormItem(item, index)">
						删除
					</el-button>
				</el-col>
				<transition name="el-fade-in-linear">
					<div v-show="item.show">
						<el-col :span="24" style="margin-left:20px">
							<el-form-item label="规格名称" :prop="'secondPayments.' + index + '.formName'" :rules="[{ required: true, message: '请输入规格名称', trigger: 'blur' }]">
								<el-input
									v-model="item.formName"
									maxlength="25"
									show-word-limit
									placeholder="请输入规格名称"
								/>
								<span class="reminder">规格名称在商品详情页和用户的消费账单中对用户可见，长度不超过25个字。</span>
							</el-form-item>
						</el-col>
						<el-col :span="24" style="margin-left:20px">
							<el-form-item label="调用次数" :prop="'secondPayments.' + index + '.packageNum'" :rules="[{ required: true, message: '请输入调用次数', trigger: 'blur' }]">
								<el-input
									v-model="item.packageNum"
									placeholder="请输入调用次数"
								>
									<template slot="append">
										次
									</template>
								</el-input>
							</el-form-item>
						</el-col>
						<el-col :span="24" style="margin-left:20px">
							<el-form-item label="价格" :prop="'secondPayments.' + index + '.packagePrice'" :rules="[{ required: true, message: '请输入价格', trigger: 'blur' }]">
								<el-input
									v-model="item.packagePrice"
									placeholder="请输入规格名称"
								>
									<template slot="append">
										元
									</template>
								</el-input>
							</el-form-item>
						</el-col>
					</div>
				</transition>
			</div>
		</el-form>

js代码如下

            // 添加规格
			addFromItem () {
				this.addForm.secondPayments.push({
					show: true,
					packageNum: '',
					sort: '',
					packagePrice: '',
					formName: '',
					key: Date.now()
				});
			},
			// 删除规格
			deleteFormItem (item, indexs) {
				this.$confirm('此操作将永久删除该条记录, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				})
					.then(() => {
						// this.$refs.addForm.validate();
						this.addForm.secondPayments.splice(indexs, 1);
					})
					.catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
			},

新增规格和删除一条规格