iview UI 下拉框select表单校验错误信息不消失

1.需求描述

弹窗添加时,对下拉框进行选择,点击确定进行非空校验

2.使用场景

对下拉框进行校验

3.问题描述

选中下拉框的值之后,下拉框select表单校验错误信息不消失

4.解决方案 (已解决加入)
经过排查,是change事件重复导致冲突了,如下代码所示:

<FormItem label="选择实验名称" prop='abtest_id'>
    <Select v-model="formValidate.abtest_id" placeholder="请选择" @on-change="changeAbtest">
      <Option v-for="item in allExpList"  :value="item.exper_id" :key="item.exper_id">{
    { item.exper_name }}Option>
    Select>
FormItem>
abtest_id: [
  {
      required: true, message: '请选择实验名称' } //注意:当该控件绑定已经on-change时,此处不要有trigger: 'change'
],

也就是说 @on-change=“changeAbtest” 和 rules规则里面的 trigger: ‘change’ 重复了

校验中把 trigger: ‘change’ 去掉即可
代码如下:

ruleValidate: {
     
   abtest_id: [
     {
      required: true, message: '请选择实验名称' }
   ]
}

OK,收工!如果可以实现记得点赞分享,谢谢老铁~

你可能感兴趣的:(iview,踩坑,vue.js,iview)