需求：在form表單中點(diǎn)擊可以添加dom元素命雀，如下圖

思路：使用數(shù)字循環(huán)糯钙，點(diǎn)擊之后數(shù)字加1碟婆，實(shí)現(xiàn)元素的添加。data中定義其變量的時候进泼，將其定義為數(shù)組

<div?v-for="index?of?internetNum"?:key="`${index}A`">
?????<el-row>
????????<el-col?:span="8">
?????????????<el-form-item?:label="`網(wǎng)卡${index}`">
????????????????<el-input?v-model="form.cards.name[index-1]"?placeholder="請輸入"/>
?????????????</el-form-item>
? ? ? ? </el-col>
????????<el-col?v-if="index?===?1"?:span="8">
?????????????<svg-icon?icon-class="addMore" @click="num?=?num?+1"/>
????????</el-col>
????</el-row>
????<el-row>
????????<el-col?:span="8">
????????????<el-form-item?:label="`MAC${index}`">
????????????????<el-input?v-model="form.cards.mac[index-1]"?placeholder="請輸入"/>
?????????????</el-form-item>
????????</el-col>
????????<el-col?:span="8">
????????????<el-form-item?:label="`IP${index}`">
????????????????<el-input?v-model="form.cards.ip[index-1]"?placeholder="請輸入"/>
????????????</el-form-item>
????????</el-col>
????????<el-col?:span="8">
?????????????<el-form-item?:label="`掩碼${index}`">
????????????????<el-input?v-model="form.cards.mask[index-1]"?placeholder="請輸入"/>
?????????????</el-form-item>
????????</el-col>
? ? ? </el-row>
</div>

data(){
? ? return{
? ??????internetNum:1,
? ? ? ? form:{
? ? ? ? ? ? cards:{
? ? ? ? ? ? ? ? name:[],
? ? ? ? ? ? ? ? mac:[],
? ? ? ? ? ? ? ? ip:[],
? ? ? ? ? ? ? ? mask:[]
? ? ? ? ? ? }
? ? ? ? }
? ? }
}
index?of?3? ?數(shù)字循環(huán)
:label="`IP${index}`"? ?
form.cards.ip[index-1]

最后在清空form表單的時候遇到一個問題：使用?this.$refs[formName].resetFields()無法清空cards中的數(shù)據(jù)蔗衡，嘗試添加上props 但是無效，最后使用最傻的辦法乳绕，手動置空绞惦，如下：
this.form.cards?=?{
????name:?[],
? ? mac:?[],
????ip:?[],
????mask:?[]
?}

后期優(yōu)化：

首先將數(shù)據(jù)結(jié)構(gòu)優(yōu)化入下：
this.form.cards?= [{
? ? name:'',
? ? mac:'',
? ? ip:'',
? ? mask:''
}]

代碼：
<div?v-for="(item,index) of?form.cards"?:key="`${index}A`">
????<el-row>
????????<el-col?:span="8">
????????????<el-form-item?:label="`網(wǎng)卡${index+1}`">
????????????????<el-input?v-model="form.cards[index].name"?placeholder="請輸入"/>
????????????</el-form-item>
? ? ? ? </el-col>
????????<el-col?v-if="index?===?0"?:span="8">
????????????<svg-icon?icon-class="addMore" @click="addItem"/>
????????</el-col>
? ??????<el-col?v-if="index?!==?0"?:span="8">
?????????????<svg-icon?icon-class="reduceOne" @click="reduceItem(index)"/>
????????</el-col>
????</el-row>

????<el-row>
????????<el-col?:span="8">
?????????????<el-form-item?:label="`MAC${index}`">
?????????????????<el-input?v-model="form.cards[index].mac"?placeholder="請輸入"/>
?????????????</el-form-item>
? ? ? ? </el-col>
????????<el-col?:span="8">
?????????????<el-form-item?:label="`IP${index}`">
? ? ? ? ? ? ? ? <el-input?v-model="form.cards[index].ip"?placeholder="請輸入"/>
????????????</el-form-item>
? ? ? ? </el-col>
????????<el-col?:span="8">
????????????<el-form-item?:label="`掩碼${index}`">
????????????????<el-input?v-model="form.cards[index].mask"?placeholder="請輸入"/>
????????????</el-form-item>
????????</el-col>
????</el-row>
</div>

methods:{
? ??addItem(){? // 增加一個元素
? ? ? ? this.form.cards.push({
? ??????????name:'',
????????????mac:'',
????????????ip:'',
????????????mask:''
????????})
? ? }，
? ??reduceItem(index){ //減少一個元素
? ??????this.form.cards.splice(index,1)
? ? }
}