element提交自动定位校验不通过位置并提示

在vue项目中，el-form表单使用的频率很高，当页面内容较多提交的时候无法一时间定位到哪个字段没填。这里简单记录一下element提交自动定位校验不通过位置并提示的解决方法：

主要步骤：

1、在有必填校验的el-form-item元素中通过ref定义一个名字（通常与prop一致）；

    <el-form
              ref="solutionForm"
              :model="solutionForm"
              label-width="180px"
              :rules="disabled ? rules : rulesOne"
              class="inline-form label-ellipsis input-full"
              :disabled="disabled"
            >
              <el-row type="flex" class="flex-wrap">
                <el-col :span="8">
                  <el-form-item label="解决方案行业：" prop="TRADE" ref="TRADE">
                    <el-select
                      v-model="solutionForm.TRADE"
                      placeholder="请选择"
                      @change="getTRADE"
                    >
                      <el-option
                        v-for="item in TRADE_DICT"
                        :key="item.FIELD_VALUE"
                        :label="item.FIELD_DESC"
                        :value="item.FIELD_VALUE"
                        v-show="!item.disabled"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="一级场景：" prop="FIRST_SCENE" ref="FIRST_SCENE">
                    <el-select
                      v-model="solutionForm.FIRST_SCENE"
                      placeholder="请选择"
                      @change="getFIRST_SCENE"
                    >
                      <el-option
                        v-for="item in FIRST_SCENE_DICT"
                        :key="item.FIELD_VALUE"
                        :label="item.FIELD_DESC"
                        :value="item.FIELD_VALUE"
                        v-show="!item.disabled"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="二级场景：" prop="SECOND_SCENE" ref="SECOND_SCENE">
                    <el-select
                      v-model="solutionForm.SECOND_SCENE"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in SECOND_SCENE_DICT"
                        :key="item.FIELD_VALUE"
                        :label="item.FIELD_DESC"
                        :value="item.FIELD_VALUE"
                        v-show="!item.disabled"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
    </el-form>

 2、把提交校验的validate方法进行封装，在提交的时候先调用校验方法进行非空判断；

export default{
        methods:{
            submitAudit:_.debounce(async function () {
                this.messageStr = [];
                try {
                    await Promise.all([
                      this.validateLocation('solutionForm'),
                    ]);
                } catch (error) {
                  this.$message.warning(this.messageStr.join("、"));
                  this.fullScreenLoading = false;
                  return;
                }
            },
                                   
          // 校验不通过自动定位到首个校验不通过的位置处
          validateLocation(formName){
            this.$refs[formName].validate((valid, object) => {
              if (valid) {
                return true;
              } else {
                for (let key in object) {
                  object[key].map((item) => {
                    this.messageStr.push(item.message);
                  });
                  let dom = this.$refs[Object.keys(object)[0]];
                  if (Object.prototype.toString.call(dom) !== "[object Object]") {
                    dom = dom[0];
                    return; // 结束语句并跳出语句，进行下个语句执行
                  }
                  // 根据form表单的中的ref名称定位，自动滚动到校验处
                  dom.$el.scrollIntoView({
                    block: "center",
                    behavior: "smooth",
                  });
                }
                throw new error();  // 单个form表单校验不通过就终止循环
              }
            })
          },
        }

 实现效果：

当最后提交的时候，自动定位到最开始不符合校验的字段处，并对所有不符合校验的字段进行提示。

参考文档：element表单校验新玩法：一键定位未通过字段位置_修改 element form表单验证信息位置-优快云博客