vue & element-ui 表单验证 auto scroll All In One

vue & element-ui 表单验证，自动定位到 error 字段

表单验证，如何实现自动滚动定位到 error 字段！

this.$emit('scroll');

https://element.eleme.cn/#/zh-CN/component/form#biao-dan-yan-zheng

saveForm (formName) {
    this.$refs[formName].validate((valid, object) => {
        console.log('valid, object', valid, object);
        for (let i = 0; i < this.ruleForm.creativeList.length; i++) {
            this.ruleForm.creativeList[i].isError = false;
        }
        if (!valid) {
            const keys = Object.keys(object).filter(key => key.includes('.originalLandingPages'));
            const indexs = keys.map(key => parseInt(key.slice(13, 14)));
            for (const index of indexs) {
                this.ruleForm.creativeList[index].isError = true;
            }
            this.$emit('scroll');
            return;
        };
        // this.getSubmitParams();
        this.ajaxToSubmit();
    });
},

scrollIntoView

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

const element = document.getElementById("box");

element.scrollIntoView();

element.scrollIntoView(false);

element.scrollIntoView({
    block: "end",
});

element.scrollIntoView({
    behavior: "smooth", 
    block: "end", 
    inline: "nearest",
});

demo

vue 表单验证 手动 scroll 到错误位置 ?

        scrollToTop () {
            const element = document.getElementById('RuleForm');
            if(element) {
                element.scrollTop = 0;
            }
        },
        confirmHandler () {
            console.log('isSaveBatch', this.isSaveBatch);
            // console.log('this.getSubmitParams()', this.getSubmitParams());
            this.$refs['RuleForm'].validate((valid, object) => {
                if (!valid) {
                    // console.log('valid, object', valid, object);
                    // 查询 prop DOM & 手动 scroll
                    for (let key in object) {
                        console.log('key =', key);
                        const dom = document.querySelector(`[for="${key}"]`);
                        console.log('dom=', dom);
                        dom?.scrollIntoView({
                            //滚动到指定节点
                            block: 'center',
                            //值有start,center,end，nearest，当前显示在视图区域中间
                            behavior: 'smooth',
                            //值有auto、instant,smooth，缓动动画（当前是慢速的）
                        });
                        break;
                    }
                    // this.scrollToTop();
                    return;
                };
                // this.ajaxToSubmit();
            });
        },

refs

?xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有??xgqfrms, 禁止转载 ???，侵权必究??！