elementUi表单滚动到错误提示位置,删除选择标签

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

• 滚动到某地方我们使用scrollIntoView方法,具体api

方法一:

表单案例:

<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>

定义验证规则

data(){
     return {
         formData: {
          name: '',
         },
         rules: {
          name: [{ required: true, message: '请输入name', trigger: ['change', 'blur'] }],
         },
      }
}

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

最后验证的地方实现滚动

//在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一致)

<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>

定义验证规则

data(){
     return {
         formData: {
          popupDelay: '',
         },
         rules: {
          name: [{ required: true, message: '此项不能为空', trigger: ['change', 'blur'] }],
         },
      }
}

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

最后验证的地方实现滚动

//在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
    }
})

删除选择标签

 this.$store.dispatch('tagsView/delView', this.$route)