动态添加标签,如input,参数传数组示例
2019-10-22 本文已影响0人
艾希_可可
1、数据源
paylist: [{
type: '',
value: '',
}],
2、样式创建
<Form-item label="支付账号" v-for="(item,index) in paylist">
<Select style="width: 100px" v-model="item.type" placeholder="请选择">
<Option v-for="item in amclist" :value="item.key">{{item.value}}</Option>
</Select>
<i-input style="width: 190px" v-model="item.value" placeholder=""></i-input>
<i-button style="height: 30px;width: 50px;color: white;background-color: skyblue;" v-on:click="accountAdd">+</i-button>
<i-button style="height: 30px;width: 50px;color: white;background-color: red;" v-on:click="delaccount(index)">-</i-button>
</Form-item>
3、添加、减少函数
delaccount(index){
if(this.paylist.length == 1){
return
}
this.paylist.splice(index,1);
},
accountAdd(){
let model = {
type: '',
value: '',
}
this.paylist.push(model);
},
4、请求函数
将数组转成json串
var strify = JSON.stringify(this.paylist);
this.getRequest('/zcopt/depositPlanInfo/addDepositPlanInfo', {
'depositPlan': this.formData.name,
'capitalManagerCompany': this.formData.planno,
'loanAidCompany': self.formData.institutions,
'paymentAccount': strify,//
'comment': self.formData.comment
}).then(respond => {
console.log(respond)
this.list_loadding = false
this.modaladdbzj = false
if (respond.data.code == 1000) {
this.$Message.success('添加成功');
this.clearData()
this.setInitPage(1)
} else {
this.$Message.warning('添加失败');
}
})
大功搞成,到现在才尝试这个传参方式,也算get新技能吧