公司專案中，有個儲存表單的頁面有很多必填欄位校驗。而現在增加需求，點選儲存的時候，自動跳轉到必填的地方。擼起袖子幹起來

• 將要跳轉的HTML頁面 加個ref

<template>
  <div class="app-container calendar-list-container company-form">
    ...//省略
    <tr ref="trId">
                <td class="td-title">組織機構程式碼<span class="color-red">*</span></td>
                <td class="td-text">
                  <el-form-item prop="orgNo">
                    <el-input
                      :disabled="notEdit"
                      v-model="form.orgNo"
                      placeholder="組織機構程式碼"
                    ></el-input>
                  </el-form-item>
                </td>
        </tr>
    </div>
    ...
 </template>
 

• 跳轉目標點方法

handleSave(formName) {
    this.$refs[formName].validate(valid => {
          if (valid) {
           //dosomething
          } else {
            //校驗不通過跳轉到目標
            let anchor = this.$refs.trId;
            this.$nextTick(() => {
             document.body.scrollTop=anchor.offsetTop
            });
            return false;
          }
        });
      }
}

 

執行預覽， wtf，居然沒效果。什麼情況
很遺憾，打印出高度為0！！！！
很奇怪的問題。
最後一番折騰。監聽高度啥的依然沒效果。百度之，網上給出的所有解決方案都是一樣的... 都是所DOCTYPE 是否指定型別了。
來去判斷使用
document.body還是document.documentElement

以上方案不行，我就滾動當前的容器，chrome elements找到當前滾動的容器,重新擼如下：

 let anchor = this.$refs.trId.offsetTop;
 this.$nextTick(() => {
    document.querySelector(".scroll-container").scrollTop = anchor;
 });
 

重新執行預覽，終於可以了！

重新整理: 

頁面有很多個必填項，如何處理呢?

this.$refs[formName].validate((valid, dom) => {
          if (valid) {
            //do
          } else {
            for (let key of Object.keys(dom)) {
              //獲取ref dom 點進行錨點定位
              let anchor = this.$refs[key].offsetTop;
              this.$nextTick(() => {
                document.querySelector(".scroll-container").scrollTop = anchor;
              });
              break;
            }
            return false;
          }
        });

頁面只需要ref的值與必填欄位一致即可