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

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

注意给 form-item 加 ref

<el-form-item 
	ref="parentId"
    label="上级项目"
    prop="parentId"
    v-bind="parentCol"
></el-form-item>
    // 表单校验
    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'
            })
          }
        }
      })
      )
    },
<!-- 添加用户弹框--> <el-dialog :title="title" v-model="openAddUser" width="90%" append-to-body fullscreen> <el-form :model="queryEmp" ref="queryDetRef" :inline="true" label-width="150px"> <el-form-item label="用户" prop="EMP_NAME_"> <el-input v-model="queryEmp.EMP_NAME_" placeholder="请输入用户名称" clearable style="width: 240px" @keyup.enter="handleQueryEmp" /> </el-form-item> <el-form-item> <el-button type="primary" icon="Search" @click="handleQueryEmp">搜索</el-button> <el-button icon="Refresh" @click="resetQueryDet">重置</el-button> </el-form-item> </el-form> <!-- 使用 el-row 和 el-col 实现左右布局 --> <el-row :gutter="20"> <!-- 左侧表格 --> <el-col :span="12"> <el-card> <el-table v-loading="loading" :data="empListLeft"> <el-table-column type="selection" width="50" align="center"/> <el-table-column label="用户编号" align="center" key="EMP_ID_" prop="EMP_CODE_"/> <el-table-column label="用户名称" align="center" key="userName" prop="EMP_NAME_"/> <el-table-column label="机构名称" align="center" key="ORG_NAME_" prop="ORG_NAME_"/> <el-table-column label="操作" align="center" class-name="small-padding fixed-width"> <template #default="scope"> <el-button link type="primary" @click="handleAddEmp(scope.row)">添加</el-button> </template> </el-table-column> </el-table> </el-card> </el-col> <!-- 右侧表格 --> <el-col :span="12"> <el-card> <el-table v-loading="loading" :data="empListRight"> <el-table-column type="selection" width="50" align="center"/> <el-table-column label="用户编号" align="center" key="EMP_ID_" prop="EMP_CODE_"/> <el-table-column label="用户名称" align="center" key="
03-11
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值