对elementui中一个el-form-item中包含多个输入框或下拉框等的表单验证处理问题

对elementui中一个el-form-item中包含多个输入框或下拉框等的表单验证处理问题

1.场景

在这里插入图片描述
如果你的代码结构也是一个el-form-item中包含多个输入框或下拉框等,但是你又要进行表单验证的话,

  <el-form :rules="rules" ref="form" :model="form" style="display:flex">
        <el-form-item prop="aaa" style="width:300px;margin-right: 10px;" label="选择方式">
            <el-select v-model="form.aaa" @change="clear">
                <el-option v-for="(item,index) in demoArr" :key="index" :label="item.label" :value="item.value">  
                </el-option>
            </el-select>    
        </el-form-item>
            <el-input v-model="form.bbb"></el-input>
        <span>{{form.aaa == 1 ? '人': '%'}} </span>
    </el-form>   

很明显,elementui一个el-form-item不大好验证多个输入框或下拉框,而且主要的是你不能准备的表达出每个输入框或下拉框是通过blur还是change来出发的表单验证。

2.解决

将代码结构改变,外层再嵌套一层el-form-item

 <el-form-item label="选择方式" style="display:flex" class="select-input">
        <el-form-item prop="aaa" style="width:300px;" >
            <el-select v-model="form.aaa" @change="clear">
                <el-option v-for="(item,index) in demoArr" :key="index" :label="item.label" :value="item.value">
                   
                </el-option>
            </el-select>    
        </el-form-item>
        <el-form-item prop="bbb" style="width:300px;">
            <el-input v-model="form.bbb"></el-input>
        </el-form-item>
        <span>{{form.aaa == 1 ? '人': '%'}} </span>
    </el-form-item>

也是完全可以对其中的输入框或下拉框进行校验

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值