在form表单中点击实现元素添加
需求如图:
思路:使用v-for数字循环,点击之后数字加1,实现元素的添加,并相应对data中定义其变量进行添加。
<div v-for="index of num" :key="index">
<el-row>
<el-col :span="8">
<el-form-item :label="`盘符${index}`">
<el-input v-model="order.name[index-1].one" placeholder="请输入"/>
</el-form-item>
</el-col>
<el-col :span="8">
<svg-icon v-if="index === 1" icon-class="add" class="add" @click="addNum"/>
<svg-icon v-else icon-class="red00
uce" class="add" @click="reduceNum(index)"/>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item :label="`容量${index}`">
<el-input v-model="order.name[index-1].two" placeholder="请输入"/>
</el-form-item>
</el-col>
</el-row>
</div>
data: function() {
return {
num:1,
order:{
name:[{
one:'',
two:''
}]
}
}
},
methods:{
addNum() {
this.order.name.push({
one: '',
two: ''
})
this.num = this.num + 1
},
reduceNum(index) {
this.$delete(this.order.name, index - 1)
this.num = this.num - 1
}
}
补充:
index of 3 数字循环
:label="盘符${index}
" es6模板字符串(``)
在data中定义:
data1:’’,
data2:’’,
data3:’’,
…
在methods中想批量给他们赋值的写法:this[data${index}
] ([``]模板字符串)