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

无·糖

于 2024-04-16 13:52:14 发布

阅读量1.4k

点赞数 37

分类专栏： Vue 文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/qq_58648235/article/details/127260158

版权

Vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

文章介绍了如何在Vue表单中使用v-for进行服务器名称和MAC地址的动态渲染，以及addForm数组的push和pop方法实现增删行功能。

摘要由CSDN通过智能技术生成

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()
      }
    },