el-form提交时，数据校验失败，自动滚动到对应的错误项

最新推荐文章于 2024-06-21 15:23:08 发布

辛德瑞拉和Thomas

最新推荐文章于 2024-06-21 15:23:08 发布

阅读量1.2k

点赞数 2

分类专栏： elementUI 文章标签： vue.js javascript elementui

本文链接：https://blog.youkuaiyun.com/weixin_49905445/article/details/128476756

版权

elementUI 专栏收录该内容

2 篇文章

订阅专栏

在ultils创建文件 elFormErrorScroll.js

export function elFormErrorScrollIntoView() { 
    // 获取第一个校验错误的元素 
    const element = document.querySelectorAll('.el-form-item__error')[0] 
    // 滚动到错误元素对应位置 
    element.scrollIntoView({ 
      behavior: 'smooth', 
      block: 'center' 
    }) 
  }

在使用页引入 import { elFormErrorScrollIntoView } from “@/utils/elFormErrorScroll.js”;
提交表单时调用该方法

submitForm() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          // 校验通过
        } else {
          // 校验不通过
          // 使用$nextTick的原因是，错误提示的元素是在视图更新后出现的，不使用$nextTick获取元素是undefined
          this.$nextTick(() => {
            elFormErrorScrollIntoView();
          });
          return false;
        }
      });
    },