我是靠谱客的博主 瘦瘦蛋挞,这篇文章主要介绍Element表单必填校验提示并自动定位,现在分享给大家,希望可以做个参考。

【Element-ui】表单必填校验提示并自动定位

需求(根据自身需求):
1、tips警告
2、提示框警告
3、自动定位到首个未通过校验字段

建议:
必填的el-form-item需要添加ref(建议ref与prop同名,ref用于定位
不啰嗦,直接上代码

this.$refs['xxx'].validate((valid, object) => {
	if(valid) {
        //逻辑处理
    }else {
		let str = []
        for (let key in object) {
        	object[key].map(item => {
        		str.push(item.message)
        	})
            let dom = this.$refs[Object.keys(object)[0]]
            if (Object.prototype.toString.call(dom) !== '[object Object]') {
                dom = dom[0]
                break
            }
            // 定位代码
            dom.$el.scrollIntoView({
                block: 'center',
                behavior: 'smooth'              
            });
        }
        this.$message.error(str.join(', '));
	}
})

最后

以上就是瘦瘦蛋挞最近收集整理的关于Element表单必填校验提示并自动定位的全部内容,更多相关Element表单必填校验提示并自动定位内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(97)

评论列表共有 0 条评论

立即
投稿
返回
顶部