el-form中嵌套一个el-form 进行表单校验

2023-10-31

 数据格式为form对象中嵌套一层可循环数组,数组内嵌套table表格,也可循环

form: {
  id: row.id,
  process: [{
   code: '',
    log: [{
      id: ''
    }]
  }]
}
<el-form :model="form" ref="form" v-for="(item, index) in form.process" :key="index" class="bord">
  <el-form-item
    :prop="'process.' + index + '.code'"
    :rules="[{ required: true, message: '请选择数据', trigger: 'change' }]"
  >
  <el-select v-model="item.code" placeholder="请选择数据" @change="getChange(item,item.code)">
   <el-option
   v-for="i in data"
    :key="i.value"
    :label="i.label"
    :value="i.value"
    />
   </el-select>
  </el-form-item>
  <el-form :model="form.process[index]" ref="process.lage">
    <el-table
      ref="lage"
      class="sort-table"
      v-model="item.lage"
      :data="item.lage"
      max-height="240"
      :header-cell-style="{textAlign: 'center'}"
      :cell-style="{ textAlign: 'center' }"
     >
     <el-table-column
       type="index"
       label="序号"
       width="60"
      />
     <el-table-column
       prop="id"
       label="节点id"
       width="80"
     >
      <template v-slot="scope">
        <el-form-item
         :prop="'lage.' + scope.$index + '.id'"
         :rules="[{ required: true, message: '请输入id', trigger: 'blur' }]"
        >
          <el-input v-model="scope.row.id" placeholder="请输入id" />
        </el-form-item>
       </template>
      </el-table-column>
     </el-table>
  </el-form>
</el-form>

 点击按钮提交表单时校验

save() {
  Promise.all([this.$refs['form'][0].validate(), this.$refs['process.lage'][0].validate()]).then(() => {
    //接口等一系列正常操作
    })
  })
},

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

el-form中嵌套一个el-form 进行表单校验 的相关文章

随机推荐

  • 11月26日 创建敌人血量UMG,游戏分数和游戏时间UMG,人物开始位置与不同的游戏模式,控制台功能治愈 ,杀死AI

    C 创建敌人血量UMG 新建一个USERUMG的Class类 h Fill out your copyright notice in the Description page of Project Settings pragma once
  • 普元SOA相关概念

    SOA 面向服务的体系结构 Service oriented architecture 是构造分布式计算的应用程序的方法 它将应用程序功能作为服务发送给最终用户或者其他服务 BPS 普元业务流程平台套件Primeton BPS Busine
  • 初学gitlab设置访问权限

    写本文的目的是 能够实现开发代码共享 1 打开一个项目your project 主界面如下图所示 2 将gitlab项目私有设置为内部 在左侧工具栏中找到Setting 并点进去 将Project visibility设置为Internal
  • 快捷键常识及JDK配置

    进制之间的转换 十进制 0 1 2 3 4 5 6 7 8 9 二进制 0 1 八进制 0 1 2 3 4 5 6 7 十六进制 0123456789ABCDEF 其他进制转十进制 数字 进制 当前位数 1 数字 进制0 二进制 转换 十进
  • 基于STM32单片机电子称重系统设计_最终稿

    摘 要 称重技术自古以来便被人们所重视 与我们生活的各个方面息息相关 电子称重技术能够在科学研究 工业生产制造及其他生产和日常生活中得到广泛应用 随着科学技术时代的来临 智能化的仪器已经取代了传统的仪表和控制设备 让我们的传统仪器也有了翻天
  • springboot读取模版文件

    前言 resources下的template目录下的模版文件 第一种 第二种 第三种 templateDir template 第一种 Resource resource new ClassPathResource templateDir
  • ubuntu安装docker

    如果之前有的朋友安装了Docker 不成功的 可以先卸载旧的版本 sudo apt get remove docker docker engine docker io containerd runc 没安装的朋友 可以不用执行 一 安装前的
  • 第十三届蓝桥杯青少组省赛Python真题,包含答案

    目录 一 选择题 二 编程题 第十三届蓝桥杯青少组省赛Python真题 包含答案 一 选择题 第 1 题 单选题 下列关于函数的说法正确的是 答案 C 第 2 题 单选题 十进制数55转换成十六进制是 答案 C 第 3题 单选题 下列方法中
  • Netty应用UDP协议

    UDP是用户数据报协议 User Datagram protocol 的简称 其主要作用是将网络数据封装成数据报形式 提供面向服务的简单信息传送服务 与TCP协议不同 UDP协议直接利用IP协议进行UDP数据报的传输 UDP提供的是面向无连
  • 记一次非常非常坑的springboot整合mybatisplus报错

    11 11 41 493 main DEBUG org springframework boot test context SpringBootTestContextBootstrapper Neither ContextConfigura
  • 基础技术篇 9 ——物联网常见通信协议与通讯协议梳理【上】- 通讯协议

    1 通信 与 通讯 傻傻分得清 传统意义上的 通讯 主要指电话 电报 电传 通讯的 讯 指消息 Message 媒体讯息通过通讯网络从一端传递到另外一端 媒体讯息的内容主要是话音 文字 图片和视频图像 其网络的构成主要由电子设备系统和无线电
  • 校园网Drcom自动登录脚本(OpenWRT适用)

    本文原文已发表至本人博客 哔哔哔哔 校园网Drcom自动登录脚本 OpenWRT适用 前言 优雅地登录校园网认证Dr com D版 Step1 连接校园网 打开Chrome并进入校园网认证界面 F12进入开发者模式 勾选Network 再勾
  • 基于EasyExcel的Excel读取

    1 引入依赖
  • synchronize和Lock锁的区别

    为什么java已经通过synchronized关键字实现同步访问了 还需要提供Lock synchronized的缺陷 前面博客有提到过释放对象的锁有两种情况 程序执行完同步代码块会释放代码块 程序在执行同步代码块是出现异常 JVM会自动释
  • Swift复写UIViewController的init方法

    在OC中我们直接复写 init 方法 instancetype initWithLeftViewController UIViewController leftViewController contentViewController UIV
  • 总结下CGI常用的环境变量

    每当服务器加载脚本的一个实例时下述环境变量被设置 并且是私有和特定于该实例的 AUTH TYPE如果服务器支持基本的认证并且如果脚本被保护 此变量提供认证类型 此信息是特定于协议和服务器的 AUTH TYPE的一个例子是BASIC CONT
  • 【HTML+CSS+JS】简单的登录注册验证

    登录注册验证 简单的小说明 效果 源码 HTML 登录注册 html loginSuccess html CSS JS pageChange js Click js 简单的小说明 本文是基于https blog csdn net NpcCa
  • size_t和int区别

    参考 https blog csdn net qingzhuyuxian article details 84579320 总结 size t大小跟随系统位数变化 printf打印时 用 zd来打印比较好
  • WSL_02 WSL配置强大的 zsh

    文章目录 1 ZSH简介 2 安装zsh 2 1 准备阶段 2 基础安装 3 zsh更换主题 3 1 使用vscode 打开 zshrc 4 自定义支持插件 4 1 修改配置 5 安装第三方插件 autosuggestions 5 1 下载
  • el-form中嵌套一个el-form 进行表单校验

    数据格式为form对象中嵌套一层可循环数组 数组内嵌套table表格 也可循环 form id row id process code log id