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

admin2024-07-05  40

前情提要:

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

我的代码如下:

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

####伪代码,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”的校验,也就解决了第一次不触发的问题,但是为什么第一次回不触发呢?个人感觉这里有数据的响应式导致的结果,页面还没有捕获到数据变化吧。

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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明原文出处。如若内容造成侵权/违法违规/事实不符,请联系SD编程学习网:675289112@qq.com进行投诉反馈,一经查实,立即删除!