elementui清除表单个别表单项验证

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([])数组，逗号隔离就行