elementui表单元素change时调用接口，表单规则验证接口数据

场景：elementui表单元素change时调用接口获取接口数据之后，表单规则验证接口数据

change函数在调用接口获取数据之后，利用validateField，单个元素进行验证接口数据

1.页面元素

<el-form-item label="xxxx" prop="projectId">
              <el-select
                :disabled="actionType==='update'?true:false"
                v-model="planFormData.projectId"
                @change="getProjectDetail(planFormData.projectId)"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in projectList"
                  :label="item.name"
                  :value="item.code"
                  :key="item.code"
                ></el-option>
              </el-select>
            </el-form-item>

2.验证字段

rules: {
        projectId: [
          { required: true, message: "请选择xxxx", trigger: "change" },
          {
            required: true,
            validator: checkHasSeted,
            trigger: "change",
          },
        ],
}

3.验证规则

var checkHasSeted = async (rule, value, callback) => {
      // var that = this;
      // await this.getHasSeted(this.planFormData.projectId);
      if (this.hasSeted) {
        if (this.isClick) {
          this.$message({
            message: "xxxxxxxx",
            type: "error",
          });
        }
        return callback(new Error("xxxxxxxx"));
      } else if (!this.hasAccount) {
        return callback(new Error("xxxxxxxx"));
      } else {
        callback();
      }
    };

 4.change函数，获取接口数据之后利用validateField，验证单个元素

// 获取xxxx详情
    async getProjectDetail(id) {
      this.hasSeted = false;
      await this.getProjectInfo(id);//获取数据 this.getAllocationCircle("first");
      this.$refs.planForm.validateField("projectId", (valid) => {//表单验证 // console.log(111,valid);
      });
    },