效果如图:
核心代码:
javascript
<div v-for="(item,index) in arrayData" :key="item.id">
//上面这个是关键代码,所有思路靠这个打通
<el-input
type="input" //除了输入框,还有textarea等
placeholder="请填写测试需求"
v-model="item.data" //这里是要再input中显示的值
>
</el-input>
<el-button type="danger" @click="delete(item,index)">-</el-button>
</div>
<el-button type="primary" @click="add">+</el-button>
javascript
data(){
return {
arrayData:[
{
id:"",
data:""
}
],
dataNum:0
}
}
methods:{
delete(item,index){
if(this.arrayData.length<=1){//如果只有一个输入框则不可以删除
return false
}
this.arrayData.splice(index,1)//删除了数组中对应的数据也就将这个位置的输入框删除
},
add(item){
this.arrayData.push(//增加就push进数组一个新值
{
id:this.dataNum++,
data:''
}
)
},
}