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

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的校验

参考此解决

• 当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');
},