vue表单点击按钮增加或者删除一行

vue表单点击按钮增加或者删除一行

不需要动态改变的就不用放在一个form-item中，可以单独写一个form-item。
需要点击增加和删除的表单项目可以用v-for来循环渲染。

<a-form :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }">
	<a-form-item  label="服务器名称" >
		<a-input v-model="addForm[0].serverName"/>
	</a-form-item>    
	<div v-for="(item,index) in addForm" :key="index">
		<a-form-item  label="服务器MAC地址：" >
			<a-input 
			required
			v-model="item.macName"/>
		</a-form-item>    
	</div>
	<a-form-item>
		<a-icon @click="addMac" type="plus" style="display:inline-block;color:#08B30C"/>
    </a-form-item>
    //这里删除没有使用到，有需要的话可以自行添加
	<a-form-item>
		<a-icon  @click="delMac" type="minus" style="display:inline-block;color:#08B30C"/>
	</a-form-item> 
</a-form>

效果如下：

数据：

addForm:[
        {
          serverName:'',
          serverMac:''
        },
      ],

方法：

// 点击添加mac
    addMac(){
      this.addForm.push(
        { serverMac: '' }
      )
    },
//点击删除mac
    delMac() {
      if (this.addForm.length >= 1) {
        this.addForm.pop()
      }
    },