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

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

# 1. 下拉框校验 #

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

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

*  header

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

*  form

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

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

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

async validateInstitutionId(validate, value, callback){ 
        //由于此处校验机构和业务是关联的，所以每次触发校验后，先清除上一次的表单校验信息
        this.$refs['form'].clearValidate()
    
        if(!value){ 
            callback(new Error('请选择机构领域'));
        }
        //编辑框打开没改动
        if (!this.isAdd && value == this.formTemp.institutionId) { 
            callback();
            return;
        }
    
        if (this.form.name !== "") { 
            let params = { 
                name: this.form.name,
                institutionId: value
            };
    
            console.log(params)
    
            await validateOnly(params).then(res => { 
                console.log(res);
                if (res > 0) { 
                    callback(new Error('该机构下已存在此业务类型'));
                    return;
                } else { 
                    callback();
                }
            }).catch(err => { 
                console.log(err.response.data.message);
            });
        }
    },
    
    
    async validateNameOnly(validate, value, callback){ 
        //由于此处校验机构和业务是关联的，所以每次触发校验后，先清除上一次的表单校验信息
        this.$refs['form'].clearValidate()
    
        //编辑框打开没改动
        if (!this.isAdd && value == this.formTemp.name) { 
            callback();
            return;
        }
    
        if (this.form.institutionId !== "") { 
            let params = { 
                name: value,
                institutionId: this.form.institutionId
            };
    
            console.log(params)
    
            await validateOnly(params).then(res => { 
                console.log(res);
                if (res > 0) { 
                    callback(new Error('名称重复'));
                    return;
                } else { 
                    callback();
                }
            }).catch(err => { 
                console.log(err.response.data.message);
            });
        }
    },
    
    
    
    handleDialogClose() { 
    	this.resetForm()
    	//重新赋值后再移除校验
    	this.$refs['form'].clearValidate()
    },
    cancel() { 
    	this.resetForm()
    	//重新赋值后再移除校验
    	this.$refs['form'].clearValidate()
    },

# 3. treeselect的校验 #

[参考此解决][Link 1]

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

<el-form-item label="所属模块" prop="origin">
    	<treeselect  noChildrenText="暂无子数据" @input="inputSelect" clearAllText="清除所有" noResultsText="无匹配结果" v-model="form.origin" :options="menus" style="width: 360px;" placeholder="菜单类目" />
    </el-form-item>
    //--------------------------------------------------
    origin: [
    	{ required: true, message: '所属模块不能为空', trigger: 'input'}
    ]
    //--------------------------------------------------
    inputSelect(data){ 
    	this.$refs.form.validateField('origin');
    },

[Link 1]: https://www.cnblogs.com/zuojiayi/archive/2019/03/11/10512571.html