动态增减表单项
<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic"> <el-form-item v-for="(domain, index) in dynamicValidateForm.domains" :label="'域名' + index" :key="domain.key" :prop="'domains.' + index + '.value'" :rules="{ required: true, message: '域名不能为空', trigger: 'blur' }" > <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button> </el-form-item> <el-form-item> <el-button @click="addDomain">新增域名</el-button> </el-form-item> </el-form> <script> export default { data() { return { dynamicValidateForm: { domains: [{ value: '' }] } }; }, methods: { removeDomain(item) { var index = this.dynamicValidateForm.domains.indexOf(item) if (index !== -1) { this.dynamicValidateForm.domains.splice(index, 1) } }, addDomain() { this.dynamicValidateForm.domains.push({ value: '', key: Date.now() }); } } } </script>绑定方式为利用index动态进行绑定:prop="‘domains.’ + index + ‘.value’"
同理，可以利用index对表格内表单进行沿验证绑定
<el-form :model="ruleForm" ref="ruleForm"> <el-button class='newlyAdded' size="small" @click="planAdd" v-if="mode!=='see'" type="primary" style="margin-bottom:10px;">新增节点</el-button> <el-table class="tableSpecialForm" :data="ruleForm.buildPlan" border style="width: 100%;margin:20px 0;"> <el-table-column label="计划节点"> <template slot-scope="scope"> <el-form-item :key="scope.row.key" :prop="'buildPlan.'+ scope.$index + '.planNode'" :rules="planRules.planNode"> <el-input :disabled="mode==='see'||scope.$index=='0'||scope.$index=='1'||scope.$index=='2'" v-model="scope.row.planNode" placeholder="请输入" class="nm-input"> </el-form-item> </template> </el-table-column> <el-table-column label="计划完成时间" width="250"> <template slot-scope="scope"> <el-form-item :key="scope.row.key" :prop="'buildPlan.'+ scope.$index + '.planComptime'" :rules="planRules.planComptime"> <el-date-picker v-model="scope.row.planComptime" value-format="yyyy-MM-dd" format="yyyy 年 MM 月 dd 日" type="date" placeholder="选择时间" :disabled="mode==='see'" class="nm-input"> </el-date-picker> </el-form-item> </template> </el-table-column> <el-table-column label="计划支付比例（100%）"> <template slot-scope="scope"> <el-form-item :key="scope.row.key" :prop="'buildPlan.'+ scope.$index + '.planPayment'" :rules="planRules.planPayment"> <el-input :disabled="mode==='see'" v-model="scope.row.planPayment" placeholder="请输入"> </el-form-item> </template> </el-table-column> <el-table-column label="备注"> <template slot-scope="scope"> <el-form-item :key="scope.row.key" :prop="'buildPlan.'+ scope.$index + '.planRemarks'" :rules="planRules.planRemarks "> <el-input :disabled="mode==='see'" :rows="2" type="textarea" v-model="scope.row.planRemarks" placeholder="请输入"> </el-form-item> </template> </el-table-column> <el-table-column label="" align="center" width="70" v-if="mode!=='see'"> <template slot-scope="scope"> <el-button v-if="scope.$index!='0'&&scope.$index!='1'&&scope.$index!='2'" type="info" icon="el-icon-minus" size="mini" @click="removeTableList(scope.$index)"></el-button> </template> </el-table-column> </el-table> </el-form>利用:prop="‘buildPlan.’+ scope.$index + ‘.planComptime’"进行绑定
或者:prop="‘buildPlan[’+scope.$index+’].planComptime’"
也可以用es6语法中的` ,可以在字符串中进行数据的换算，并能通过${ }来获取参数 ，类似
`resource.${scope.$index}.provideOrg`重点：绑定后对表格进行操作，发现会出现，删除第二行，第三行表格行会直接继承第二行验证结果，且不能改变验证结果 原因是没有加key 这与vue的机制有很大关系，当然包括react也都是这么处理的，key是一个非常重要的属性 key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。 在之后的添加表格中key为Date.now(),保证key值不重复
this.projectform.budgetEstimate5.push( {costName:'',calculateBasis:'',calculateMethod:'',totalPrice:0,remarks:'',key:Date.now()})然后在table中每个表单项中绑定key，:key=“scope.row.key”
