vben-admin 中滚动到错误字段时，显示不全问题解决

Bessie234

已于 2022-08-03 12:31:34 修改

阅读量651

点赞数 2

分类专栏： vben填坑文章标签：验证错误 scrollToField 同步手动滚动信息显示

于 2022-08-03 12:30:32 首次发布

本文链接：https://blog.csdn.net/qq_33256701/article/details/126137861

版权

vben填坑专栏收录该内容

1 篇文章 0 订阅

订阅专栏

表单scrollToField滚动到错误字段时，显示不全问题解决方法：

在验证不通过捕捉异常里面进行滚动，注意scrollToField需要设置await 进行同步，否则document.body.scrollTop滚动不生效

         try {

           const data = await validate();

           } catch (e: any) {
         
          const firstErrorField = e.errorFields.length > 0 ? e.errorFields[0] : {};
          await scrollToField(firstErrorField?.name[0]); // 这里需要同步设置

          // fix:incomplete display of verification prompt information when scrollToField
          // 手动再次滚动一段距离 
          let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
          document.body.scrollTop = scrollTop - 100;
          document.documentElement.scrollTop = scrollTop - 100;

          createMessage.info(firstErrorField?.errors[0]);
        }