antdv: form 表单校验不通过时,让标红的项目滚动到可见范围内

this.$nextTick 是核心代码,因为 .ant-form-explain 类需要一段时间才会渲染出来,要等到页面渲染完成后,才能获取到标红的元素并滚动

this.$refs.parkPlanningFrom.validate(valid => {
    if (!valid) {
       // 页面有滚动条,让校验不通过的项目滚动到可见范围内
       this.$nextTick(() => {
         document.querySelector('.ant-form-explain').scrollIntoView({
           block: 'center',
           behavior: 'smooth'
         })
       })
       return
    }
    ……
})

 

posted @ 2022-07-10 15:39  我就尝一口  阅读(602)  评论(0编辑  收藏  举报