动态生成的表单要用:prop属性,语法:prop="'v-for绑定的数组.’ + index + '.v-model绑定的变量’"。
比如:prop="'optionArray.’ + index +’.prop’",optionArray是v-for绑定的数组,index是索引,prop是表单绑定的v-model的名称,使用.把他们连接起来。
示例代码如下:
<template> <div> <el-form ref="form" :model="addForm" label-width="80px"> <div class="moreRules"> <div class="moreRulesIn" v-for="(item, index) in addForm.moreNotifyObject" :key="item.key"> <el-row> <el-col :span="6"> <el-form-item label="field" :prop="'moreNotifyObject.' + index + '.field'" :rules="[{ required: true, message: '请完善信息' }]"> <el-input v-model="item.field" placeholder="请输入field" class="el-select_box" ></el-input> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="name" :prop="'moreNotifyObject.' + index + '.name'" :rules="[{ required: true, message: '请完善信息' }]" > <el-input v-model="item.name" placeholder="请输入name" class="el-select_box" ></el-input> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="max" :prop="'moreNotifyObject.' + index + '.max'" :rules="[{ required: true, message: '请完善信息' }]" > <el-input v-model="item.max" placeholder="请输入max" class="el-select_box" ></el-input> </el-form-item> </el-col> <el-col :span="6" align="center"> <el-button @click="deleteRules(item, index)">删除</el-button> </el-col> </el-row> </div> <el-button @click="addUser">增加</el-button> <el-button @click="initData">清空</el-button> </div> </el-form> </div> </template> <script> export default { data() { return { addForm: { name: "", content: "", moreNotifyObject: [ { field: "", name: "", max: "", }, { field: "", name: "", max: "", }, ], }, }; }, methods: { initData() { this.addForm.moreNotifyObject = []; }, addUser() { this.addForm.moreNotifyObject.push({ field: "", name: "", max: "", }); }, deleteRules(item, index) { this.index = this.addForm.moreNotifyObject.indexOf(item); if (index !== -1) { this.addForm.moreNotifyObject.splice(index, 1); } }, }, }; </script>