前情提要：
今天维护一个表单校验的时候发现一件事情，就是在表单中使用了 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>问题效果给你们看一下：第一次点击是不会触发校验的。
Cascader-第一次选择不触发自定义校验
解决方案：
思路：给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中区分表单全部校验和单独字段校验的文章，细节在这里面，可以去看看。