美文网首页
动态添加标签,如input,参数传数组示例

动态添加标签,如input,参数传数组示例

作者: 艾希_可可 | 来源:发表于2019-10-22 17:03 被阅读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新技能吧

    相关文章

      网友评论

          本文标题:动态添加标签,如input,参数传数组示例

          本文链接:https://www.haomeiwen.com/subject/pgzqvctx.html