vue录入数据，录入完毕点击确定的时候，如果用户有没有输入的，高度滚动到没有输入的地方怎么实现

Question

Vue 录入页面，用户录完所以的数据之后，点击确定（数据上传到服务器），前端判断是否有空值，如果有数据不给提交，高度自动滚动到没有输入的地方（未实现），颜色高亮（已经实现颜色高亮），怎么实现呢？

点击 确认回填的时候如果有空值滚动到相应的高度

数据的结构是

             let newList = [];
                        let aMap = {};
                         articleList.forEach(a => {
                          if (!(('' + a.deviceId) in aMap)){
                            aMap['' + a.deviceId] = newList.length
                            newList.push({
                              deviceId: a.deviceId,
                              deviceName:a.deviceName,
                              areaId:a.areaId,
                              xianshide:xianshide,
                              yanse:"red",
                              list: [{
                                  deviceId:a.deviceId,
                                  areaId:a.areaId,
                                  areaName:a.areaName,
                                  itemId:a.itemId,
                                  itemName:a.itemName,
                                  itemType:a.itemType,
                                  measureUnit:a.measureUnit,
                                  taskId:a.taskId,
                                  taskName:a.taskName,
                                  taskStatus:a.taskStatus,
                                  unitId:a.unitId,
                                  unitName:a.unitName,
                                  value:null,
                                  zheng:true,
                                  yichang:false,
                                  SeleteShow:false,//下拉列默认是否显示
                                  shifoyichang:"请选择异常",//提示的文字和最终选择的文字
                                  NotLost:false,//当点击确认回填的时候哪里没有输入哪里变红给用户醒目提示
                                  HieghtDom:document.documentElement.scrollTop || document.body.scrollTop,//获取到当前dom和页面的高度
                              }]
                            })
                          } else {
                            newList[aMap['' + a.deviceId]].list.push({
                                yanse:"red",
                                 xianshide:xianshide,
                                deviceId:a.deviceId,
                                areaId:a.areaId,
                                  areaName:a.areaName,
                                  deviceName:a.deviceName,
                                  itemId:a.itemId,
                                  itemName:a.itemName,
                                  itemType:a.itemType,
                                  measureUnit:a.measureUnit,
                                  taskId:a.taskId,
                                  taskName:a.taskName,
                                  taskStatus:a.taskStatus,
                                  unitId:a.unitId,
                                  unitName:a.unitName,
                                  value:null,
                                  zheng:true,
                                  yichang:false,
                                  SeleteShow:false,//下拉列默认是否显示
                                  shifoyichang:"请选择异常",//提示的文字和最终选择的文字
                                  NotLost:false,//当点击确认回填的时候哪里没有输入哪里变红给用户醒目提示
                                  HieghtDom:document.documentElement.scrollTop || document.body.scrollTop,//获取到当前dom和页面的高度
                            })
                          }
                        })    

我想通过HieghtDom这个属性拿到每个dom和页面的高度然后直接滚动，但是每个都是0，没有高度

当点击确定的时候

      if(newList[i].list[j].value == null && shifoyichang == null){
                            newList[i].list[j].NotLost=true;
                        }

我把框的颜色变了一个 高亮出来 但是如果滚动到没有输入值的高度呢？还是是其他的方法实现的呢？

Answer 1

el.scrollIntoView(true) 就是滚动到指定元素的位置， 或者用window.scrollTo(0, 指定滚动高度); 都可以实现。

Answer 2

同意楼上，
不过scrollIntoView有些兼容性问题
用scrollTo的话需要知道滚动的位置

需要知道某个元素的位置可以通过 offestTop来获取