elementUI表单校验自动定位未通过验证字段位置

2020-11-19  本文已影响0人  陶菇凉

.elementUI的表单提交没有layui的那么智能,能直接跳到验证未通过的字段位置,所以需要自己写。

// 表单验证,页面过长,验证未通过跳到指定位置
export const verifyJump = {
    data(){
        return{
        }
    },
    created(){
    },
    methods:{
      submit(formName){
        this.$refs[formName].validate((valid,object) => {
          if (valid) {}else{
            this.verifyJumpFn(object)
          }
        })
      },
      verifyJumpFn(object){
            for (let i in object) {
              let dom = this.$refs[i];
              if (Object.prototype.toString.call(dom) !== '[object Object]') {
                //这里是针对遍历的情况(多个输入框),取值为数组
                dom = dom[0]
                break
              }
            dom.$el.scrollIntoView(false);
            // 下面这种写法不兼容ie
            // dom.$el.scrollIntoView({
            //     //滚动到指定节点
            //     block: 'end', //值有start,center,end,nearest,当前显示在视图区域中间
            //     behavior: 'smooth', //值有auto、instant,smooth,缓动动画(当前是慢速的)
            //   })
            }
        }
    }
}

注意

image.png
上一篇 下一篇

猜你喜欢

热点阅读