element的form表单中输入框、下拉框、treeselect的校验问题

拼搏现实的明天。 2023-02-24 11:19 69阅读 0赞

1. 下拉框校验

  • 当前版本的element对select选择器的验证存在问题：select选了值，关闭弹框，再打开会触发自动校验。

    • 目前有两种解决方法:
    • 1.使用 v-if 控制表单,太消耗性能
    • 2.关闭弹框时直接delete选择器校验，下次打开弹框再添加进去
      //使用第二种，触发form中的方法addRules(),把对下拉框的校验重新加进去

  • header

    openDialog() { 

    1. 触发form中的方法addRules(),把对下拉框的校验重新加进去
    2. this.$refs.form.addRules();
    3. this.$refs.form.dialog = true

    },

  • form

    addRules() { 

    1. this.rules.institutionId = [
    2.       { required: true, validator: this.validateInstitutionId, trigger: "change"}
    3.   ]

    },
    resetForm() { 

    1. //关闭对话框
    2. //重置表单
    3. this.dialog = false
    4. this.$refs['form'].resetFields()
    5. this.form = { name: '', code: '', institutionId: '', active: '1'}
    6. //当前版本的element对select选择器的验证存在问题：select选了值，关闭弹框，再打开会触发自动校验。
    7. //目前有两种解决方法: 1.使用 v-if 控制表单,太消耗性能 2.关闭弹框时直接delete选择器校验，下次打开弹框再添加进去
    8. //使用第二种
    9. delete this.rules.institutionId;

    }

2. 输入框和下拉框的联动校验

  • 机构领域和业务类型，不同机构领域下可以有相同的业务类型

    async validateInstitutionId(validate, value, callback){ 

    1. //由于此处校验机构和业务是关联的，所以每次触发校验后，先清除上一次的表单校验信息
    2. this.$refs['form'].clearValidate()
    4. if(!value){ 
    5.     callback(new Error('请选择机构领域'));
    6. }
    7. //编辑框打开没改动
    8. if (!this.isAdd && value == this.formTemp.institutionId) { 
    9.     callback();
    10.     return;
    11. }
    13. if (this.form.name !== "") { 
    14.     let params = { 
    15.         name: this.form.name,
    16.         institutionId: value
    17.     };
    19.     console.log(params)
    21.     await validateOnly(params).then(res => { 
    22.         console.log(res);
    23.         if (res > 0) { 
    24.             callback(new Error('该机构下已存在此业务类型'));
    25.             return;
    26.         } else { 
    27.             callback();
    28.         }
    29.     }).catch(err => { 
    30.         console.log(err.response.data.message);
    31.     });
    32. }

    },

  1. async validateNameOnly(validate, value, callback){ 
  2.     //由于此处校验机构和业务是关联的，所以每次触发校验后，先清除上一次的表单校验信息
  3.     this.$refs['form'].clearValidate()
  5.     //编辑框打开没改动
  6.     if (!this.isAdd && value == this.formTemp.name) { 
  7.         callback();
  8.         return;
  9.     }
  11.     if (this.form.institutionId !== "") { 
  12.         let params = { 
  13.             name: value,
  14.             institutionId: this.form.institutionId
  15.         };
  17.         console.log(params)
  19.         await validateOnly(params).then(res => { 
  20.             console.log(res);
  21.             if (res > 0) { 
  22.                 callback(new Error('名称重复'));
  23.                 return;
  24.             } else { 
  25.                 callback();
  26.             }
  27.         }).catch(err => { 
  28.             console.log(err.response.data.message);
  29.         });
  30.     }
  31. },
  35. handleDialogClose() { 
  36.     this.resetForm()
  37.     //重新赋值后再移除校验
  38.     this.$refs['form'].clearValidate()
  39. },
  40. cancel() { 
  41.     this.resetForm()
  42.     //重新赋值后再移除校验
  43.     this.$refs['form'].clearValidate()
  44. },

3. treeselect的校验

参考此解决

  • 当vue-treeselect组件已选内容之后，检验提示仍然存在，element-ui的trigger中blur和change均不生效

    1. <treeselect  noChildrenText="暂无子数据" @input="inputSelect" clearAllText="清除所有" noResultsText="无匹配结果" v-model="form.origin" :options="menus" style="width: 360px;" placeholder="菜单类目" />


    //—————————————————————————
    origin: [

    1. { required: true, message: '所属模块不能为空', trigger: 'input'}

    ]
    //—————————————————————————
    inputSelect(data){ 

    1. this.$refs.form.validateField('origin');

    },

发表评论

表情：
评论列表 （有 0 条评论，69人围观）

还没有评论，来说两句吧...

相关阅读

    相关 angular使用下拉框+表单

    在使用angular的过程中，遇到了很多需要操作下拉框的需求，特地总结一下   第一种查询页面 查询页面就是给一个下拉框，选项从数据库中来，每一次改变还可以联动

    矫情吗；*矫情吗；*/ 0 赞/ 338 阅读