场景需求:前端使用''表单提交新增内容时,个别字段需要做必填项校验,当校验<treeselect>字段时,校验信息不能实时改变,即选择入了内容后仍然提示需要选择,从使用角度显得特别不舒服,如下所示:
![](https://img-blog.csdnimg.cn/946a51b5476747658e1abb11485a4887.png)
尝试失败的办法:
'trigger' 使用 'blur' 或者 'change' 都不管用
![](https://img-blog.csdnimg.cn/55c57fdd8a194e4cab753c72035801eb.png)
以下提供解决办法,校验状态,做到实时感知是否已经选择内容填入.
①<treeselect>内定义一个@input="inputSelect"方法
<el-col :span="12">
<el-form-item label="归属区域" prop="areaId">
<treeselect v-model="form.areaId"
:options="areaOptions"
:show-count="true"
clearAllText="清除所有"
noOptionsText="暂无数据"
noResultsText="无匹配结果"
placeholder="请选择归属区域"
@input="inputSelect"
/>
</el-form-item>
</el-col>
②定义'rules'内的校验规则,注意使用'input'
![](https://img-blog.csdnimg.cn/868c214075a546b9820ce46d6136c75e.png)
③在'methods'内定义以上'inputSelect'校验方法,注意括号内填被校验的字段
![](https://img-blog.csdnimg.cn/5ba0887f7af94baa9ca1631d912dd539.png)
自此完成了对 <treeselect> 必填录入项的实时校验!