ElementUI中el-select标签校验提示不消失的问题

在vue表单校验时更新选择框后校验提示并没有消失，之前解决过这类问题，时间长了忘记怎么处理了，特此记录一下

<el-form ref="form" :model="form" :rules="rules" label-width="100px">
  <el-form-item label="互助区名称" prop="districtName">
    <el-input v-model="form.districtName" placeholder="请输入互助区名称" show-word-limit maxlength="20"/>
  </el-form-item>
  <el-form-item label="互助区区长" prop="districtChief">
    <el-select v-model="form.districtChief" placeholder="请选择互助区区长" filterable clearable >
      <el-option
        v-for="item in userOptions"
        :key="item.value"
        :label="item.label"
        :disabled="item.disabled"
        :value="item.value"
      >
      </el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="经度" prop="longitude">
    <el-input v-model="form.longitude" placeholder="请输入经度" show-word-limit maxlength="15"/>
  </el-form-item>
  <el-form-item label="纬度" prop="latitude">
    <el-input v-model="form.latitude" placeholder="请输入纬度" show-word-limit maxlength="15"/>
  </el-form-item>
  <el-form-item label="获取经纬度">
    <el-button plain @click="innerVisible = true">地图采点</el-button>
  </el-form-item>

</el-form>




// 表单校验
rules: {
  districtName: [{ required: true, message: '请输入互助区名称', trigger: 'blur' }],
  districtChief: [{ required: true, message: '请选择互助区区长', trigger: 'blur' }],

}

未填数据提交时触发校验提示 在选择数据信息后提示并没有消失

其实很简单，把rules里面校验参数blur改为change即可

districtChief: [{ required: true, message: '请选择互助区区长', trigger: 'change' }],

具体原因： 在Vue中，trigger参数用于指定何时触发表单校验。change和blur都是常见的触发方式。

• change：在表单元素的值发生改变并且失去焦点时触发校验。适用于下拉框、单选框、复选框等需要选择的表单元素。
• blur：在表单元素失去焦点时触发校验。适用于文本框、密码框等需要输入的表单元素。

因此，如果表单元素需要选择，则应该使用change触发校验；如果表单元素需要输入，则应该使用blur触发校验。

但是使用treeselect多选框的话依然会出现该问题，可能是因为treeselect组件的值更新不及时导致的。 可以在treeselect组件上添加@input事件并手动触发表单校验。例如：

这样，在每次选择多选框后，都会触发表单校验并更新错误提示信息。