【vue动态输入框实现】点击按钮增加或删减一行

1、实现动态输入框，首先第一步写出一个你想要的输入框放在html中，并附加增减按钮。

<div class="departmentAndPrincipal">
<div>
<a-cascader
:option="options"
placeholder="请选择涉及部门及负责人"
class="involeDepartmnt"
/>
<a-icon type="close-circle" class="deleteTcon" @click="deleteDepartmentAndPrincipal" />
<a-icon type="puls-circle" class="addTcon" @click="addDepartmentAndPrincipal"  />
</div>

2、在想要循环的地方加上v-for循环，循环的内容是一个空对象，如果想要有一个输入框常驻则提前在空数组中放一个空对象中。空数组提前在data中定义

<div class="departmentAndPrincipal">
<div v-for=(item, index) in couterList" :key="index">
<a-cascader
:option="options"
placeholder="请选择涉及部门及负责人"
class="involeDepartmnt"
/>
<a-icon type="close-circle" class="deleteTcon" @click="deleteDepartmentAndPrincipal" />
<a-icon type="puls-circle" class="addTcon" @click="addDepartmentAndPrincipal"  />
</div>

data () {
return｛
couterList: { [] }
｝
}

3、接下来就是往设置的按钮中添加事件，主要用到的是两个js的两个方法，push（）往数组中添加新的空数组，pop（）删除数组中的空数组。增加按钮直接添加不必多说，删除按钮还需要避免用户将页面中所有的输入框都删除的情况，判断页面中只有一个输入框的时候不可删除。

methods: {
addDepartmentAndPrincipal () {
this.couterList.push({})
},
deleteDepartmentAndPrincipal () {
if(this.couterList.length === 1){
return false
}
this.couterList.pop({})
}

这样就简单的实现了一个点击增加按钮增加新的输入框，点击删除按钮则删除当前输入框的效果，当然我是把新增和删除按钮都进行循环了，如果只想要一个按钮不进行循环的效果那不放入循环就可以了。