对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>
也是完全可以对其中的输入框或下拉框进行校验
更多推荐
已为社区贡献3条内容
所有评论(0)