13.elementUi表单滚动到错误提示位置

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第13天，点击查看活动详情

当elementUi使用form表单验证时,验证不通过就会出现错误提示,表单过长错误不能明确知道具体错误在哪里,因此需要滚动到错误提示的地方 - 滚动到某地方我们使用scrollIntoView方法,具体api

方法一:

表单案例: html <el-form ref="form" :model="formData" :rules="rules"> <el-form-item label="name：" prop="name"> <el-input v-model="name" placeholder="请输入" /> </el-form-item> </el-form>

定义验证规则 javascript data(){ return { formData: { name: '', }, rules: { name: [{ required: true, message: '请输入name', trigger: ['change', 'blur'] }], }, } }

当表单存在错误的时候,会又 is-error className,所以可以根据他的节点并滚动

最后验证的地方实现滚动 javascript //在js方法中校验 this.$refs['form'].validate(valid => { if (valid) { // 验证通过 } else { this.$nextTick(() => { // 获取错误节点 let isError = this.$refs['form'].$el.getElementsByClassName('is-error') isError[0].scrollIntoView({ // 滚动到指定节点 // 值有start,center,end，nearest，当前显示在视图区域中间 block: 'center', // 值有auto、instant,smooth，缓动动画(当前是慢速的) behavior: 'smooth', }) }) return } })

方法二:

表单案例:(需要没有item定义ref,和prop一致) html <el-form ref="form" :model="formData" :rules="rules"> <el-form-item label="popupDelay:" prop="popupDelay" ref='popupDelay'> <el-input v-model="popupDelay" placeholder="请输入" /> </el-form-item> </el-form>

定义验证规则 javascript data(){ return { formData: { popupDelay: '', }, rules: { name: [{ required: true, message: '此项不能为空', trigger: ['change', 'blur'] }], }, } }

通过表单验证的第二个参数(如:object),获取没有通过验证的选项

最后验证的地方实现滚动 javascript //在js方法中校验 this.$refs['form'].validate((valid,object) => { if (valid) { // 验证通过 } else { Object.keys(object).forEach(item=>{ let dom = this.$refs[item] if (Object.prototype.toString.call(dom) !== '[object Object]') { //这里是针对遍历的情况(多个输入框)，取值为数组 dom = dom[0] } dom.$el.scrollIntoView({ //滚动到指定节点 block: 'center', //值有start,center,end，nearest，当前显示在视图区域中间 behavior: 'smooth' //值有auto、instant,smooth，缓动动画(当前是慢速的) }) }) return } })