【elementui】表单form必填校验并自动定位到首个未校验通过字段

需求：

1.tips提示

2.输入框标红提示

3.自动定位到第一个未校验通过的字段的位置

提示：

必填的el-form-item需要添加prop和ref（建议ref与prop同名，ref用于定位)

html:

<el-form
  label-width="130px"
  label-position="right"
  ref="formRef"
  :rules="behaviorDetail ? {} : rules"
  :model="form"
>
  <el-row>
    <el-col :span="12">
      <el-form-item
        label="所属项目："
        ref="projectId"
        prop="projectId"
        :show-message="false"
      >
        <div v-if="behaviorDetail || isRemove">
          {{ form.projectName }}
        </div>
        <el-select
          v-else
          v-model="form.projectId"
          placeholder="请选择"
          style="width: 100%"
          @change="fetchFolderData"
        >
          <el-option
            v-for="item in projectOptions"
            :key="item.id"
            :label="item.projectName"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-col>
    <el-col :span="12">
      <el-form-item
        label="归档文件夹："
        ref="folderIds"
        prop="folderIds"
        :show-message="false"
      >
        <div v-if="behaviorDetail || isRemove">
          {{ form.folderName }}
        </div>
        <el-cascader
          v-else
          ref="chooseRegionDom"
          v-model="form.folderIds"
          :options="folderOptions"
          :props="{ expandTrigger: 'hover' }"
          style="width: 100%"
        >
        </el-cascader>
      </el-form-item>
    </el-col>
  </el-row>
  <el-row v-if="isRemove">
    <el-col :span="24">
      <el-form-item
        label="说明："
        ref="description"
        prop="description"
        :show-message="false"
      >
        <div v-if="behaviorDetail">{{ form.description }}</div>
        <el-input
          v-else
          class="word-limit-padding-right"
          type="textarea"
          maxlength="500"
          show-word-limit
          v-model="form.description"
          placeholder="请输入"
        ></el-input>
      </el-form-item>
    </el-col>
  </el-row>
</el-form>

js

rules: {
    projectId: [{ required: true, trigger: ["blur", "change"] }], // 所属项目
    folderIds: [{ required: true, trigger: ["change", "blur"] }], // 归档文件夹
    description: [{ required: true, trigger: ["change", "blur"] }], // 说明
    files: [
      {
        required: true,
        trigger: ["blur", "change"],
        message: "请上传附件",
      },
    ], // 附件
},

// 保存前校验
// 通过校验方法validate的回调参数object获取到第一个未校验通过的dom元素
save() {
  this.$refs["formRef"].validate((valid, object) => {
    if (valid) {
      this.handleDoSave();
    } else {
      let dom = this.$refs[Object.keys(object)[0]];
      if (Object.prototype.toString.call(dom) !== "[object Object]") {
        dom = dom[0];
      }
      // 定位代码
      dom.$el.scrollIntoView({
        block: "center",
        behavior: "smooth",
      });
      return false;
    }
  });
},