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

<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.mfbz.cn/a/489269.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

cookie、localStorage、sessionStorage 详解

目录 cookie 是什么&#xff1f; cookie 不可以跨域请求 cookie 的属性 会话cookie & 永久性cookie cookie 禁用 cookie 的应用 sessionStorage 是什么&#xff1f; 失效时间 存储内容的类型 存储的大小 存储的位置 sessionStorage 的应用 localStorage 是什么…

Linux内核架构和基础概念

文章目录 前言 一、简述操作系统 二、宏内核和微内核 1.宏内核 2.微内核 3.Linux内核的特点 三&#xff0c;Linux内核架构 1.整体架构图 2.Linux子系统的划分 3.Linux子系统之间的关系 4.Linux内核目录介绍 总结 前言 随着Linux内核在全球市场份额的持续扩大&#xff0c;其影…

使用WebClient发起网络请求

目录 1、导入对应的pom 2、编写WebClientUtil请求工具类 3、使用WebClientUtil发起请求 使用WebClient的优点&#xff1a;支持lambdas 的函数&#xff1b;支持更高的并发性和更少的硬件资源&#xff1b;支持同步和异步&#xff1b;支持流式传输。具体的使用方式如下&#xff1a…

Redis 特性,为什么要用Redis,Redis到底是多线程还是单线程

一、Redis介绍 Redis&#xff08;Remote Dictionary Server )&#xff0c;即远程字典服务&#xff0c;是一个开源的&#xff0c;使用C语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库&#xff0c;并提供多种语言的API。 二、特性(为什么要用Redis&#x…

51单片机入门:定时器与中断系统

定时器的介绍 定时器&#xff1a;51单片机的定时器属于单片机的内部资源&#xff0c;其电路的设计连接和运转均在单片机内部完成。根据单片机内部的时钟或者外部的脉冲信号对寄存器中的数据加1&#xff0c;定时器实质就是加1计数器。因为又可以定时又可以计数&#xff0c;又称…

数据结构——排序之冒泡排序

&#x1f49e;&#x1f49e; 前言 hello hello~ &#xff0c;这里是大耳朵土土垚~&#x1f496;&#x1f496; &#xff0c;欢迎大家点赞&#x1f973;&#x1f973;关注&#x1f4a5;&#x1f4a5;收藏&#x1f339;&#x1f339;&#x1f339; &#x1f4a5;个人主页&#x…

HarmonyOS入门笔记1配置环境

文章目录 下载安装DevEco Studio配置环境先认识DevEco Studio界面工程目录工程级目录模块级目录 app.json5module.json5main_pages.json通知栏预览区 运行模拟器 下载安装DevEco Studio 去官网下载DevEco Studio完了安装 配置环境 打开已安装的DevEco Studio快捷方式进入配置…

Python爬虫:爬虫基本概念、流程及https协议

本文目录&#xff1a; 一、爬虫的基本概念1.为什么要学习爬虫1.1 数据的来源1.2 爬取到的数据用途 2.什么是爬虫3. 爬虫的更多用途 二、爬虫的分类和爬虫的流程1.爬虫的分类2.爬虫的流程3.robots协议 三、爬虫http和https1.http和https的概念2.浏览器发送HTTP请求的过,2.1 http…

【数据结构刷题专题】—— 二分查找

二分查找 二分查找模板题&#xff1a;704. 二分查找 二分查找前提&#xff1a; 有序数组数组中无重复元素 左闭右闭&#xff1a; class Solution { public:int search(vector<int>& nums, int target) {int left 0;int right nums.size() - 1;while (left <…

An Experimental Study of State-of-the-Art Entity Alignment Approaches论文阅读

最先进的实体对齐方法的实验研究综述 Title: An Experimental Study of State-of-the-Art Entity Alignment Approaches 日期: 2022 发表单位: IEEE github: https://github.com/DexterZeng/EAE 原文地址: https://ieeexplore.ieee.org/stamp/stamp.jsp?arnumber9174835 概括…

启扬RK3568核心板助力智慧步道轻装健身,打造全民健康生活新方式

随着物联网、AI智能等新技术的快速发展&#xff0c;智慧步道成为全国各地公园建设和全民健身公共服务设施改造的新主题。智慧步道基于物联网、人脸识别、大数据分析等技术&#xff0c;对人们的运动进行监测和数据采集&#xff0c;显示运动数据&#xff0c;包括里程统计、热量消…

档案四性检测可复用组件接口说明

nhdeep提供在归档、移交与接收、长期保存等各环节根据需求进行自主配置和调用的可复用组件&#xff0c;支持客户端和接口调用两种功能使用模式。档案四性检测组件为自建档案管理系统和各种业务系统&#xff08;如OA&#xff09;&#xff0c;提供标准化的档案四性检测功能利用&a…

YOLOv5改进系列:主干ConvNeXTV2结构助力涨点

一、论文理论 论文地址&#xff1a;ConvNeXt V2: Co-designing and Scaling ConvNets with Masked Autoencoders 1.理论思想 ConvNeXt V2 在 ConvNeXt 的基础上增加了两个创新点&#xff08;一个 framework 和一个 technique&#xff09;&#xff1a;全卷积掩码自编码器&…

人工智能 框架 paddlepaddle 飞桨 使用指南 使用例子 线性回归模型demo 1

安装过程&使用指南&线性回归模型 使用例子 本来预想 是安装 到 conda 版本的 11.7的 但是电脑没有gpu 所以 安装过程稍有变动,下面简单讲下 conda create -n paddle_env117 python=3.9 由于想安装11.7版本 py 是3.9 所以虚拟环境名称也是 paddle_env117 activa…

nuxt3使用自定义组件

说明&#xff1a;nuxt3只有components文件夹里面的页面会自动注册为组件&#xff0c;但是有些单独的页面也需要组件&#xff0c;但是也不是全局的&#xff0c;所以写在pages里面的页面&#xff0c;需要手动注册为组件使用 1.创建组件 在pages里面创建页面文件夹&#xff0c;在…

【node】express使用(三)

1、express.static快速托管静态资源 express:快速、开放、极简的Web开发框架。(npm第三方包&#xff0c;提供快速创建web服务器便捷方法) Express中文官网 (1) express快速创建web网站服务器以及api接口服务器 // 1、导入express const express require(express) // 2、创…

【 Vue 3 】Vue3.0所采用的CompositionApi与Vue2.x使用的Options Api 有什么不同?

1. 开始之前 Composition API可以说是Vue3的最大特点&#xff0c;那么为什么要推出Composition Api,解决了什么问题? 通常使用Vue2开发的项目&#xff0c;普遍会存在以下问题&#xff1a; 代码的可读性随着组件变大而变差每一种代码复用的方式&#xff0c;都存在缺点TypeScr…

搭建Spark单机版环境

在搭建Spark单机版环境的实战中&#xff0c;首先确保已经安装并配置好了JDK。然后&#xff0c;从群共享下载Spark安装包&#xff0c;并将其上传至目标主机的/opt目录。接着&#xff0c;解压Spark安装包至/usr/local目录&#xff0c;并配置Spark的环境变量&#xff0c;以确保系统…

高效解决Visual Studio无法识别到自定义头文件

文章目录 问题解决方案 问题 说明你没有好好配置项目属性 解决方案 把头文件都集中存放到一个文件夹里 之后我会持续更新&#xff0c;如果喜欢我的文章&#xff0c;请记得一键三连哦&#xff0c;点赞关注收藏&#xff0c;你的每一个赞每一份关注每一次收藏都将是我前进路…

[C++]C/C++内存管理——喵喵要吃C嘎嘎5

希望你开心&#xff0c;希望你健康&#xff0c;希望你幸福&#xff0c;希望你点赞&#xff01; 最后的最后&#xff0c;关注喵&#xff0c;关注喵&#xff0c;关注喵&#xff0c;大大会看到更多有趣的博客哦&#xff01;&#xff01;&#xff01; 喵喵喵&#xff0c;你对我真的…
最新文章