动态添加标签,如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新技能吧

上一篇下一篇

猜你喜欢

热点阅读