elemnet官网实例
动态增减表单项
<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”