el-form的表单验证不生效

之前表单验证总是返回true不生效，没注意v-if的原因，记录一下

1.原因

1）prop和model绑定的数据名称和rules名称一致;
2）表单验证ref值唯一;
3）使用v-if表单的验证失效一直返回true；在el-form-item加上key值;或者使用v-show来渲染

2.el-form部分

验证规则rules。

//form
form:any ={
	sponsorId: 0,
}
//rules验证规则
 rules: any = {
    sponsorId: [{ required: true, message: "客户名称是必填项" ,trigger: 'blur'}],
  };

表单验证方法。

async validate(){
	var valid = await (this.$refs["form"] as ElForm).validate();
    // console.log("object :>> ", this.form.sponsorId,);
    return new Promise((resolve) => {
      // 校验通过返回表单数据，反之，返回null
      if (valid) {
        resolve(this.form);
      } else {
        resolve({});
      }
    });
}

vue页面。

 <el-form
      ref="form"
      :model="form"
      :rules="rules"
    >
         <el-col :span="10" :offset="2">
          <!-- v-if要添加key -->
            <el-form-item
              label="客户名称："
              prop="sponsorId"
              v-if="isEditMode"
              key="sponsorId"
            >
              <el-select
                filterable
                v-model="form.sponsorId"
                @change="checkSponsor"
                placeholder="请选择拜访公司"
                style="width:100%"
              >
                <el-option
                  v-for="item in sponsorOptions"
                  :key="item.id"
                  :label="item.sponsorName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="客户名称：" v-if="!isEditMode">
              <span class="info-item">{{
                renderValue(renderValue(form.sponsorName))
              }}</span>
            </el-form-item>
          </el-col>
  </el-form>