本文主要是介绍elementui清除表单个别表单项验证,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
elementui清除表单个别表单项验证
- 1.使用场景
- 2.实现
1.使用场景
当我们对表单项进行操作的时候,可能会有联动的两个或则多个表单项,很容易出现下列的情况:
很明显,当我们在选择方式改变的时候就应该清除后面输入框的验证错误提示而不影响到其他的表单项。
2.实现
<!-- -->
<template><div class='app-container'><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-form-item prop="bbb" style="width:300px;margin-right: 10px;"><el-input v-model="form.bbb"></el-input></el-form-item><span>{{form.aaa == 1 ? '人': '%'}} </span></el-form> </div>
</template>
<script>
export default {data () {return {demoArr:[{label:'按数量',value:1},{label:'按比例',value:2}],form:{aaa:'',bbb:''},rules:{bbb:[{required: true, message:'请输入', trigger: 'blur'}]}};},methods: {clear(){this.$refs.form.clearValidate(['bbb'])}}
}
</script>
结果:
当然要清除多个的话,clearValidate([])数组,逗号隔离就行
这篇关于elementui清除表单个别表单项验证的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!