VUE动态增减表单输入框

2021-08-17  本文已影响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();
             }
        }
上一篇下一篇

猜你喜欢

热点阅读