美文网首页
VUE动态增减表单输入框

VUE动态增减表单输入框

作者: 各种萌新 | 来源:发表于2021-08-17 10:46 被阅读0次
    <el-form-item >
                    <el-button @click="addbankLink">新增绑定银行</el-button>
                </el-form-item>
                <el-form-item
                    v-for="(domain, index) in myForm.bankNoDtos"
                    label="绑定银行"
                    :key="domain.key"
                    :prop="'bankNoDtos.' + index + '.bankName'"
                    :rules="[{ required: true, validator: checkNumber, trigger: 'change' }]"
                >
                    <el-select v-model="domain.bankName" placeholder="请选择" style="width:30%">
                        <el-option
                        v-for="item in bankOptions"
                        :key="item.label"
                        :label="item.label"
                        :value="item.label">
                        </el-option>
                    </el-select>
                    <el-input v-model="domain.bankCardNo" placeholder="银行卡号"  minlength="16" maxlength="19" clearable style="width:50%"></el-input>
                    <el-button @click.prevent="removeBankLink(domain)">删除</el-button>
                </el-form-item>
    
    //表单form
                myForm:{
                    userName:'',
                    documentCd:'',
                    bankCardNo:'',
                    apAccountType:'',
                    bankNoDtos:[     //动态增减部分
                        {
                            bankName:'',
                            bankCardNo:''
                        }
                    ]
                },
    
    //动态添加银行和银行卡的下选框
            addbankLink(){
                this.myForm.bankNoDtos.push({
                    bankCardNo: '',
                    key: Date.now()
                })
            },
    //动态删除银行和银行卡的下选框
            removeBankLink(item) {
                var index = this.myForm.bankNoDtos.indexOf(item)
                if (index !== 0) {
                this.myForm.bankNoDtos.splice(index, 1)
                }
            },
    
    //表单验证
     checkNumber(rule, value, callback){
                 let newArr=rule.field.split('.')
                 let currentIndex=newArr[1];
                 let currentProp=newArr[2];
    
                 if(value===''){
                     return callback(new Error('请选择绑定银行'));
                 }
                if(this.myForm.bankNoDtos[currentIndex]['bankCardNo']===''){
                      return callback(new Error('请输入银行卡号'));
                 } else {
                     callback();
                 }
            }
    

    相关文章

      网友评论

          本文标题:VUE动态增减表单输入框

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