Debug-017-elementUI-el-cascader组件首次选择选项不触发表单的自定义校验

前情提要：

        今天维护一个表单校验的时候发现一件事情，就是在表单中使用了 el-cascader组件，希望根据接口返回数据去动态校验一下这里面的选项，符合逻辑就通过自定义的表单校验，不符合就在这一项的下面标红提示。做的时候发现在第一次选中 el-cascader的某一个选项时，无法触发表单校验。但是切换选项就可以触发校验。很奇怪。

我的代码如下：

####伪代码，js和HTML写在一起了，主要表达是这么个意思

// 写了两层  第一步
function validateGroup(rule: any, value: any, callback: any) {
  return callback(validateValue(qqqq.value))
}
 
// 第二步
function validateValue(value:any) {
  if ((Number(value) <= 10000)) return ('不符合校验！！！')
}


//这个是级联框的change事件
async function handleChangeGroup(val:any) {
  console.log('handleChangeGroup', val)
  const res = await deviceTableList({})
  qqqq.value = res.count
  console.log('qqqq.value', res, res.count, qqqq.value)
}


//页面结构
<el-form-item label="级联选择框:" prop="group">
          <el-cascader
            ref="cascaderRef"
            v-model="form.group"
            :options="groupOptions"
            show-all-levels
            :props="defaultProps"
            collapse-tags
            collapse-tags-tooltip
            clearable
            @change="handleChangeGroup"
          >
            <template #default="{ node, data }">
              <span>{{ data.name }}</span>
            </template>
          </el-cascader>
</el-form-item>

问题效果给你们看一下：第一次点击是不会触发校验的。

解决方案：

        思路：给el-cascader绑定change事件，在第一次点击el-cascader的时候，在change事件中准备好validateField方法。主动触发一下这一个表单项的校验

//这个是级联框的change事件
async function handleChangeGroup(val:any) {
  console.log('handleChangeGroup', val)
  const res = await deviceTableList({})
  qqqq.value = res.count
  console.log('qqqq.value', res, res.count, qqqq.value)

  //这个是关键，手动触发一下：验证具体的某个字段
  formRef.value!.validateField(['group'])
}

加上之后，就可以在第一次选择el-cascader之后就会主动触发表单中rule里对应“group”的校验，也就解决了第一次不触发的问题，但是为什么第一次回不触发呢？个人感觉这里有数据的响应式导致的结果，页面还没有捕获到数据变化吧。

补充一下：这里有一篇之前写过的区分elementUI中区分表单全部校验和单独字段校验的文章，细节在这里面，可以去看看。

Debug-004-elementUI表单校验validate&validateField_elementui validatefield errorcode-CSDN博客文章浏览阅读600次。这个不是一般的那种三个字段同时提交表单，这个是每次点击后面的write按钮的时候开始校验。当然要注意：在页面结构中要配置好相应的rules，然后这里只对“token”进行校验。这样是完全可以拆开，就是写起来写三个不同的:rules="rules"，太麻烦。以前一直用的都是validate这个，这样就是对整个表单进行校验的方法。今天碰到一个问题，是关于表单校验的问题。用的是饿了么的组件。还是挺方便的，所以要注意这两个的区别。_elementui validatefield errorcodehttps://blog.csdn.net/LM0916/article/details/138565267