首页 > 其他分享 >el-form 校验未通过,自动滚动到未通过的位置

el-form 校验未通过,自动滚动到未通过的位置

时间:2022-10-31 18:23:27浏览次数:40  
标签:el Object form dom object 校验

    // 表单校验
    checkBasicForm() {
      return new Promise((resolve) => this.$refs.basicForm.validate((valid, object) => {
        if (valid) {
      // 校验通过 resolve(this.formatterForm()) } else { // resolve(false)
      // 校验未通过,滚动到指定位置 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' }) } } }) ) },

  注意给form-item加ref

<a-form-model-item ref="parentId"
                             label="上级项目"
                             prop="parentId"
                             v-bind="parentCol"
          ></a-form-model-item>

  

标签:el,Object,form,dom,object,校验
From: https://www.cnblogs.com/hwy6/p/16845267.html

相关文章

  • WebForm混合MVC
     WebForm混合MVCWebForm模拟MVC参考文章地址:https://blog.csdn.net/cownew/article/details/504009331、创建WebForm项目2、新建AddView.aspx页面删除AddView.aspx.c......
  • [Telink][TLSR8251] [泰凌微]入门上手教程(IDE+SDK+烧录)
    相关下载​​IDE下载​​​​SDKV3.4.2.1_Patch_0001​​​​烧录工具下载​​一、IDE的使用必须以管理员身份运行必须安装到C:安装完毕后,开始下面的导入SDK。解压压缩包......
  • [Telink][TLSR8251] [泰凌微][SDK3.4] 添加广播内容 和 动态广播 厂商信息
    添加广播内容。这种直接把内容广播出去,发现者不必连接就能获取数据。广播类型/**@defgroupBLE_GAP_AD_TYPE_DEFINITIONSGAPAdvertisingandScanResponseDataformat*......
  • Jenkins Pipeline 流水线-Demo
    JenkinsPipeline流水线流水线既能作为任务的本身,也能作为Jenkinsfile使用流水线可以让我们的任务从UI手动操作,转换为代码化,像dockerfile一样。从shell命令到配置文......
  • element-ui el-table 开发环境 无法渲染,无法显示的问题
    其他vue项目正常,html环境正常,生产环境正常。只有开发环境无法渲染。试过切换element-ui的版本。依然没有作用。 最终排查的原因是vue.config.js下面的这段代码出......
  • shell脚本之函数
    函数定义函数格式一:function函数名{命令序列}格式二:函数名(){命令序列}#####main#####可以直接在主代码区直接使用函数名调用函数删除函数格式:unset 函......
  • 京东云开发者|ElasticSearch降本增效常见的方法
    Elasticsearch在db_ranking的排名又(双叒叕)上升了一位,如图1-1所示;由此可见es在存储领域已经蔚然成风且占有非常重要的地位。随着Elasticsearch越来越受欢迎,企业花费在ES建......
  • 二、.Net Core搭建Ocelot
    Ocelot是系统中对外暴露的一个请求入口,所有外部接口都必须通过这个网关才能向下游API发出请求1、Nuget引用Ocelot(注意版本,我用的是16.0.1)2、根目录添加配置文件Ocelot.js......
  • shell脚本之循环语句
    一、echo命令–输出字符串或提取Shell变量的值1、格式2、常用参数 常用的转义字符如下:\b转义后相当于按退格键(backspace),但前提是"\b"后面存在字符;“\b"......
  • Delphi datasnap如何使用IPv6地址
    今天看到电信公司开始推广使用IPv6我也想着用datasnap中间件也使用IPv6,百度一下都是下面的说法: “有些人说DATASNAP不支持IPv6,只支持IPv4。这是不正确的。DATASNAP默......