elemnet official website example
Dynamically add or subtract form items
<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>
The binding method is to use index to bind dynamically: prop="'domains.' + index +'.value'"
In the same way, you can use the index to bind the form in the form along the validation
<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>
Use: prop="'buildPlan.'+ scope.$index +'.planComptime'" to bind
或者:prop="‘buildPlan[’+scope.$index+’].planComptime’"
You can also use `in es6 syntax, you can convert data in a string, and you can get parameters through ${ }, similar to
`resource.${
scope.$index}.provideOrg`
Key point: After binding, you can operate the table and find that it will appear. Delete the second row. The third row of the table row will directly inherit the verification result of the second row, and the verification result cannot be changed. The
reason is that the key is not added.
This is very similar to the Vue mechanism. The big relationship, of course, including react is also handled in this way. Key is a very important attribute
. The special attribute of key is mainly used in Vue's virtual DOM algorithm to identify VNodes when comparing new and old nodes. If you don't use keys, Vue will use an algorithm that minimizes dynamic elements and tries to repair/reuse elements of the same type as much as possible. Using key, it will rearrange the order of the elements based on the change of the key, and will remove the elements whose key does not exist.
In the subsequent addition table, the key is Date.now() to ensure that the key value is not repeated
this.projectform.budgetEstimate5.push( {
costName:'',calculateBasis:'',calculateMethod:'',totalPrice:0,remarks:'',key:Date.now()})
Then bind the key to each form item in the table: key="scope.row.key"