[vue - ElementUI] 新增数据,form表单中,校验＜treeselect＞录入项时,解决校验状态不能实时更新

        场景需求:前端使用''表单提交新增内容时,个别字段需要做必填项校验,当校验<treeselect>字段时,校验信息不能实时改变,即选择入了内容后仍然提示需要选择,从使用角度显得特别不舒服,如下所示:

尝试失败的办法:

         'trigger' 使用 'blur' 或者 'change' 都不管用

以下提供解决办法,校验状态,做到实时感知是否已经选择内容填入.

①<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'

 ③在'methods'内定义以上'inputSelect'校验方法,注意括号内填被校验的字段

自此完成了对 <treeselect> 必填录入项的实时校验!