el-table 表格中插入表单循环校验

news2024/11/14 19:46:51

<template>
  <div>
    {{form}}
    <el-form :model="form" ref="form">
      <el-form-item label="呃呃呃呃呃呃呃">
        <el-table :data="tableData" border>

          <el-table-column prop="time" label="日期" width="180">
            <template slot-scope="scope">
              <span>{{scope.row.cases}}</span>
              <span v-if="scope.$index > 6">
                <el-form-item :prop="'list.'+scope.$index+'.cancerName'">
                  <el-input v-model="form.list[scope.$index].cancerName" placeholder="请输入内容"></el-input>
                </el-form-item>
              </span>
            </template>
          </el-table-column>

          <el-table-column prop="screeningCount" label="总数" width="180">
            <template slot-scope="scope">
              <el-form-item :prop="'list.'+scope.$index+'.screeningCount'">
                <el-input v-model="form.list[scope.$index].screeningCount" placeholder="请输入内容"></el-input>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column label="单选" width="180">
            <template slot-scope="scope">
              <el-form-item :prop="'list.'+scope.$index+'.percentage'">
                <el-radio-group v-model="form.list[scope.$index].percentage">
                  <el-radio label="线上品牌商赞助"></el-radio>
                  <el-radio label="线下场地免费"></el-radio>
                </el-radio-group>
              </el-form-item>
            </template>
          </el-table-column>

          <div slot="append">
            <i class="el-icon-circle-plus-outline" @click="add"></i>
            <i class="el-icon-circle-close" @click="del"></i>
          </div>

        </el-table>
      </el-form-item>
      <el-form-item>
        <el-button type="primary">确认</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
export default {
  data () {
    return {
      form: {
        list: [
          { cancerName: '', screeningCount: '', percentage: '' },
          { cancerName: '', screeningCount: '', percentage: '' },
          { cancerName: '', screeningCount: '', percentage: '' },
          { cancerName: '', screeningCount: '', percentage: '' },
          { cancerName: '', screeningCount: '', percentage: '' },
          { cancerName: '', screeningCount: '', percentage: '' },
          { cancerName: '', screeningCount: '', percentage: '' }
        ]
      },
      tableData: [
        { cases: '学不会1' },
        { cases: '学不会2' },
        { cases: '学不会3' },
        { cases: '学不会4' },
        { cases: '学不会5' },
        { cases: '学不会6' },
        { cases: '学不会7' }
      ]
    }
  },
  methods: {
    add () {
      this.tableData.push(
        { cases: `其他${this.tableData.length - 6}` }
      )
      this.form.list.push(
        { cancerName: '', screeningCount: '', percentage: '' }
      )
    },
    del () {
      this.tableData.pop()
      this.form.list.pop()
    }
  }
}
</script>

<style lang="less" scoped>
.el-icon-circle-plus-outline,
.el-icon-circle-close {
  font-size: 26px;
  cursor: pointer;
  margin-left: 20px;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1545629.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Jira 软件缺陷管理 (软件测试)

内容来源&#xff1a;总结黑马课程 1.软件缺陷信息 2.创建缺陷问题 2.1 缺陷模板 2.2 创建缺陷问题模板

linux + gitee+idea整套配置以及问题详解

目录&#xff1a; 1、安装git 2、git配置 3、git和gitee账户建立安全链接 4、gitee创建仓库 5、idea配置gitee 6、克隆提交代码 1、安装git 使用到github上下载最新版&#xff0c;上传到你的服务器&#xff0c;再进行解压。 这里是我的压缩包。解压命令&#xff1a; cd /usr/g…

ABAP程序代码批量导出

运行界面 *&---------------------------------------------------------------------* *& Report ZZ0001 *& *&---------------------------------------------------------------------* *& *& *&-----------------------------------------…

那位拿了多个Offer的大佬分享了最新Go面经

和大家分享一下我们 Go就业训练营 和 升职加薪星球 中战友们投稿的真实面经。 这是第一篇&#xff0c;计划还会再更新4篇最新Go面经&#xff0c;都是拿到Offer的那种&#xff01; 欢迎大家关注我的账号&#xff0c;关注之后不迷路。 先秀战绩 虽然不同的公司考察的侧重点不一…

宜搭低代码高级认证实操题1 todolist

进行中待办 已完成待办 待办事项 待办事项远程api和变量配置 回调函数 function didFetch(content) {//console.log(content.data);// content.b 1; 修改返回数据结构中的 b 字段为1let res content.data;let todoList [];for(let i in res){todoList.push(res[i]);}consol…

MVC框架里的几种对象

Java语言是一门面向对象的编程语言&#xff0c;所有都用类表达&#xff0c;入口都是一个类&#xff0c;没有独立的main&#xff08;&#xff09;函数&#xff0c;类的实例化就是对象。 简单来讲类包括数据和方法&#xff0c;方法就是操作&#xff0c;是实现业务逻辑的地方&…

应急响应靶机-Linux(2)

前言 应急响应靶机训练&#xff0c;为保证每位安服仔都有上手的机会&#xff0c;不做理论学家&#xff0c;增加动手经验&#xff0c;可前来挑战应急响应靶机-Linux(2),此系列后期会长期更新&#xff0c;关注本公众号&#xff0c;被动学习。 挑战内容 前景需要&#xff1a;看…

16:00面试,16:06就出来了,问的问题有点变态。。。

从小厂出来&#xff0c;没想到在另一家公司又寄了。 到这家公司开始上班&#xff0c;加班是每天必不可少的&#xff0c;看在钱给的比较多的份上&#xff0c;就不太计较了。没想到8月一纸通知&#xff0c;所有人不准加班&#xff0c;加班费不仅没有了&#xff0c;薪资还要降40%…

生物信息—数据库

文章目录 核酸数据库1 一级核酸数据库&#xff1a;GenBank1.1 原核生物核酸序列1.2 真核生物成熟mRNA1.3 真核生物DNA序列 2 一级核酸数据库&#xff1a;基因组数据库&#xff1a;Ensemble3 一级核酸数据库&#xff1a;微生物宏基因组数据库&#xff1a;JCVI4 二级核酸数据库 蛋…

(2022级)成都工业学院Java程序设计(JAVA)实验二:类和对象

写在前面 1、基于2022级软件工程/计算机科学与技术实验指导书 2、代码仅提供参考 3、如果代码不满足你的要求&#xff0c;请寻求其他的途径 运行环境 window11家庭版 IntelliJ IDEA 2023.2.2 jdk17.0.6 实验要求 1、 控制台菜单。在 Exp02_x 类中添加一个方法 menu_x&…

Flutter开发进阶之瞧瞧BuildOwner

Flutter开发进阶之瞧瞧BuildOwner 上回说到关于Element Tree的构建还缺最后一块拼图&#xff0c;build的重要过程中会调用_element!.markNeedsBuild();&#xff0c;而markNeedsBuild会调用owner!.scheduleBuildFor(this);。 在Flutter框架中&#xff0c;BuildOwner负责管理构建…

Java基础--128陷阱

问题引入 Integer a 123; Integer b 123; System.out.println(ab); 结果为true。 但是如果代码如下 Integer a 1230;Integer b 1230;System.out.println(ab); 这个的结果就是false。 问题解决 当Integer a 123时&#xff0c;其实他底层自动转换成了Integer a Inte…

数据库专题(oracle基础和进阶)

前言 本专题主要记录自己最近学的数据库&#xff0c;有兴趣一起补习的可以一起看看&#xff0c;有补充和不足之处请多多指出。希望专题可以给自己还有读者带去一点点提高。 数据库基本概念 本模块有参考&#xff1a;数据库基本概念-CSDN博客 数据库管理系统是一个由互相关联的…

Arduino+ESP8266+华为云物联网平台实现智能开关

前言 最近在做一个物联网项目&#xff0c;涉及到智能开关的开发。目前已经实现简单的TCP通信远程控制&#xff0c;但是考虑到后期的设备管理以及设备通信所需要的技术和服务器的维护成本&#xff0c;我决定将设备接入云平台。本文将详细阐述如何利用华为云的物联网平台&#x…

Linux系统下安装部署Linux管理面板1panel

目录 一 1panel介绍 1、1Panel简介 2、1Panel特点 二、本地环境规划 1、本此实验目的 2、本地环境部署 三、部署1Panel&#xff08;在线安装&#xff09; 1.创建安装目录 2.一键部署1Panel 3.检查1Panel服务运行状态 4.检查1Panel监听端口 四、关闭防火墙和selinux…

小动物主动跑轮和被动跑轮的功能和目的?

小动物主动跑轮和被动跑轮在运动方式、实验目的和设计构造方面上是有区别的。 运动方式不同。主动跑轮是由动物自主运动来推动跑轮转动的。这种设置可以真实地反映动物自发的运动情况。相对地&#xff0c;被动跑轮则是一种强迫运动的方式&#xff0c;通常由电机带动跑轮转动从…

视频生成Sora的全面解析:从AI绘画、ViT到ViViT、TECO、DiT、VDT、NaViT等

前言 真没想到&#xff0c;距离视频生成上一轮的集中爆发(详见《Sora之前的视频生成发展史&#xff1a;从Gen2、Emu Video到PixelDance、SVD、Pika 1.0》)才过去三个月&#xff0c;没想OpenAI一出手&#xff0c;该领域又直接变天了 自打2.16日OpenAI发布sora以来(其开发团队包…

基于yolov8安全帽检测的系统

基于yolov8安全帽检测的系统 项目描述&#xff1a; 安全头盔检测&#xff08;计算机视觉&#xff09; 1.自训练数据集1538张数据图片&#xff0c;进行标注&#xff0c;并进行100轮的训练&#xff0c;准确率达0.966 2.使用 Flask 和 Ultralytics YOLOv8 模型开发了一个 Web 应…

Matlab有限差分法求解狄利克雷(Dirichlet)边界的泊松(Poisson)问题,边界值为任意值

参考l链接&#xff1a; 有限差分法简介有限差分法-二维泊松方程及其Matlab程序实现弹性力学方程 有限差分法matlab,泊松方程的有限差分法的MATLAB实现 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %%%% Matrix method for Poisson Equation …

景联文科技上新高质量大模型训练数据!

在过去的一年中&#xff0c;人工智能领域呈现出了风起云涌的态势&#xff0c;其中模型架构、训练数据、多模态技术、超长上下文处理以及智能体发展等方面均取得了突飞猛进的发展。 在3月24日举办的2024全球开发者先锋大会的大模型前沿论坛上&#xff0c;上海人工智能实验室的领…