表单校验定位

src/components/icss/AddMedicinePrompt.vue

@@ -468,9 +468,6 @@ export default {
           // console.log('内容不为空');
           return true;
         } else {
-          // this.$nextTick(() => {
-          //   this.$refs.elscrollbar.$refs['wrap'] = 0;
-          // });
           var div = this.$refs['elscrollbar'].$refs['wrap'];
           this.$nextTick(() => {
             div.scrollTop = 0;
@@ -508,30 +505,48 @@ export default {
         return;
       }
       let flagVal = this.formVal(); // 额外的表单校验
-      // console.log(flagVal,'flagVal======================');
       if (flagVal === false) return;
       //验证外层表单
       let goOn = true,
         it = null;
+      let outIsVia = true; // 外层验证是否通过
       this.$refs.groups.validate(valid => {
         if (!valid) {
           goOn = false;
+          outIsVia = false;
           return false;
         }
       });
       //验证段落表单
+      let viewHeight = 0; // 定位到表单校验的高度
+      let viewHeightArr = []; // 表单校验出错高度的所有数组
       if (this.form.typeId !== 82 && this.form.typeId !== 83) {
         for (let i = 0; i < this.$refs.subForm.length; i++) {
           it = this.$refs.subForm[i];
+          viewHeight += it.$el.offsetHeight;
           it.$refs.form.validate(valid => {
             if (!valid) {
               goOn = false;
+              viewHeightArr.push(viewHeight);
             }
           });
         }
       }
-
+      // console.log(viewHeightArr,'viewHeightArr');
       if (!goOn) {
+        var div = this.$refs['elscrollbar'].$refs['wrap'];
+        if (outIsVia) {
+          // 外层校验通过,跳转至下层校验具体位置
+          this.$nextTick(() => {
+            div.scrollTop = +viewHeightArr[0] - 150;
+          });
+        } else {
+          // 外层校验没通过,页面滚动到顶部
+          this.$nextTick(() => {
+            div.scrollTop = 0;
+          });
+        }
+
         return;
       }
       //通过必填验证，提交保存

src/components/icss/plan/AddPlan.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-scrollbar style="height: 100%">
+  <el-scrollbar style="height: 100%" ref="elscrollbar">
     <div class="AddPlanWrapper clearfix" @click="close">
       <crumbs
         :title="isEdit ? '电子病历方案配置-修改方案' : '电子病历方案配置-添加方案'"
@@ -512,6 +512,10 @@ export default {
           });
         } else {
           this.saveDisable = false;
+          var div = this.$refs['elscrollbar'].$refs['wrap'];
+          this.$nextTick(() => {
+            div.scrollTop = 0;
+          });
           return false;
         }
       });