当前位置: 首页> 财经> 金融 > Debug-017-elementUI-el-cascader组件首次选择选项不触发表单的自定义校验

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

时间:2025/7/10 17:11:33来源:https://blog.csdn.net/LM0916/article/details/140210374 浏览次数:0次

前情提要:

        今天维护一个表单校验的时候发现一件事情,就是在表单中使用了 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.countconsole.log('qqqq.value', res, res.count, qqqq.value)
}//页面结构
<el-form-item label="级联选择框:" prop="group"><el-cascaderref="cascaderRef"v-model="form.group":options="groupOptions"show-all-levels:props="defaultProps"collapse-tagscollapse-tags-tooltipclearable@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.countconsole.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

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

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: