動態(tài)生成的表單要用:prop屬性，語法:prop="'v-for綁定的數(shù)組.’ + index + '.v-model綁定的變量’"。
比如:prop="'optionArray.’ + index +’.prop’"，optionArray是v-for綁定的數(shù)組，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>