对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>   
1
2
3
4
5
6
7
8
9
10

很明显，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>
1
2
3
4
5
6
7
8
9
10
11
12
13

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