在表格中循环插入表单

 

<template>
  <div class="key">
    {{ruleForm.casesRange}}
    <el-form label-position="top" :model="ruleForm" ref='ruleForm'>
      <el-form-item label="这个表格怎么写">
        <el-table :data="tableData" border>
          <el-table-column prop="time" label="日期" width="180" />
          <el-table-column prop="name" label="名称" width="180" />
          <el-table-column prop="type" label="是否登记(1=是,2=否)" width="180">
            <template slot-scope="scope">
              <el-form-item :prop="'casesRange.' + scope.$index + '.isRegister'" :rules="rules.change">
                <el-radio-group v-model="ruleForm.casesRange[scope.$index].isRegister">
                  <el-radio label="1">是</el-radio>
                  <el-radio label="2">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-form>

    <el-button type="primary" @click="btn">按钮</el-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      ruleForm: {
        // 表单
        casesRange: [
          { isRegister: '' },
          { isRegister: '' },
          { isRegister: '' }
        ]
      },
      // 表格数据
      tableData: [
        {
          time: '2016-05-02',
          name: '王小虎'
        },
        {
          time: '2016-05-02',
          name: '王小虎'
        },
        {
          time: '2016-05-02',
          name: '王小虎'
        }
      ],
      rules: {
        change: [
          { required: true, message: '请输入', trigger: 'change' },
        ]
      }
    }
  },
  methods: {
    btn () {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.key {
  width: 600px;
  margin: 0 auto;
  padding: 20px;
}
</style>

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

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

相关文章

数据结构之队列详解(C语言手撕)

&#x1f389;个人名片&#xff1a; &#x1f43c;作者简介&#xff1a;一名乐于分享在学习道路上收获的大二在校生 &#x1f648;个人主页&#x1f389;&#xff1a;GOTXX &#x1f43c;个人WeChat&#xff1a;ILXOXVJE &#x1f43c;本文由GOTXX原创&#xff0c;首发CSDN&…

JavaWeb--Maven

一&#xff1a;概述 1.简介 Maven 是专门用于管理和构建 Java 项目的工具&#xff0c;它的主要功能有&#xff1a; 提供了一套标准化的项目结构 提供了一套标准化的构建流程&#xff08;编译&#xff0c;测试&#xff0c;打包&#xff0c;发布 …… &#xff09; 提供了一套…

批量PDF转HTML:高效管理与优化文档格式

随着数字化时代的快速发展&#xff0c;PDF文件因其跨平台兼容性和良好的排版效果而被广泛应用。然而&#xff0c;在文本批量管理的场景中&#xff0c;我们可能需要将PDF文件转换为HTML格式&#xff0c;以便更好地进行编辑、搜索和定制。本文将为您介绍一种高效的方法&#xff0…

绝对位置编码与相对位置编码区别

本文作者&#xff1a; slience_me 文章目录 绝对位置编码与相对位置编码区别绝对位置编码相对位置编码区别和举例&#xff1a; 绝对位置编码与相对位置编码区别 绝对位置编码&#xff08;Absolute Positional Encoding&#xff09;和相对位置编码&#xff08;Relative Positio…

Vue.js+SpringBoot开发医院门诊预约挂号系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 功能性需求2.1.1 数据中心模块2.1.2 科室医生档案模块2.1.3 预约挂号模块2.1.4 医院时政模块 2.2 可行性分析2.2.1 可靠性2.2.2 易用性2.2.3 维护性 三、数据库设计3.1 用户表3.2 科室档案表3.3 医生档案表3.4 医生放号…

Hadoop伪分布式配置--没有DataNode或NameNode

一、原因分析 重复格式化NameNode 二、解决方法 1、输入格式化NameNode命令&#xff0c;找到data和name存放位置 ./bin/hdfs namenode -format 2、删除data或name&#xff08;没有哪个删哪个&#xff09; sudo rm -rf data 3、重新格式化NameNode 4、重新启动即可。

美国CPC认证证书详细介绍

美国CPC认证证书详细介绍 一、引言 美国CPC认证证书&#xff08;Childrens Product Certificate&#xff09;是针对儿童产品的一项重要认证。随着人们对儿童安全问题的日益关注&#xff0c;越来越多的家长和消费者开始关注儿童产品的质量和安全性。CPC认证证书作为一种权威的认…

多线程的典型例子——阻塞队列

文章目录 一、什么是阻塞队列&#xff1f;二、阻塞队列的功能2.1 线程安全2.2 具有阻塞功能 三、阻塞队列的作用(生产者——消费者模型的作用)3.1 生产者-消费者模型3.2 解耦合3.3 削锋填谷什么是消息队列什么是中间件&#xff1f; 四、阻塞队列的具体使用4.1 使用标准库提供的…

上拉电阻和上拉能力

大家好&#xff0c;我是记得诚。 关于上下拉电阻&#xff0c;之前写过一篇文章&#xff1a;聊一聊上拉电阻、下拉电阻、使用场景及阻值选择 有个做测试的读者&#xff0c;想转行硬件&#xff0c;之前一直在学习&#xff0c;也加入了我的硬件工程师小密圈 今天问了我一个问题…

Vue3全家桶 - VueRouter - 【6】导航守卫

导航守卫 查看以下情形&#xff1a; 点击主页链接时&#xff0c;默认情况下可直接进入指定页面&#xff0c;如下图&#xff0c;但是问题是该跳转的界面是需要用户登录后方可访问的&#xff1b; 可设置导航守卫来检测用户是否登录&#xff0c;如果已登录&#xff0c;则进入后台…

代码随想录day18(2)二叉树:翻转二叉树(leetcode226)

题目要求&#xff1a;将一棵二叉树翻转 思路&#xff1a;若想要翻转二叉树&#xff0c;只需要用swap函数将左右孩子节点翻转即可。注意前序和后序遍历均可&#xff0c;但是对于中序来说会将某些结点的左右孩子翻转了两次&#xff08;画图很明显&#xff09;&#xff0c;硬要用…

Yolov8-车辆跟踪(BoT-SORT和ByteTrack算法)

这两种代码都是成熟的&#xff0c;直接调佣即可&#xff0c;下面是使用这两种算法的代码。 直观感受&#xff1a;ByteTrack预测的速度感觉比BoT-SORT快一些&#xff0c;流畅一些。 from ultralytics import YOLOmodel YOLO(yolov8n.pt)# results model.track(source".…

快速实现主数据管理价值——敏捷型实施方法在某激光设备龙头企业项目中的应用

先前我们介绍了两种常用的主数据项目的实施方法——瀑布型实施方法和敏捷型实施方法。 本期&#xff0c;我们将为大家介绍敏捷型实施方法的成功案例&#xff1a;某激光设备龙头公司的主数据项目。 在介绍案例前&#xff0c;先回顾下上期的内容。 瀑布模型和敏捷模型是当下流行…

SpringCloud OpenFeign 服务接口调用

一、前言 接下来是开展一系列的 SpringCloud 的学习之旅&#xff0c;从传统的模块之间调用&#xff0c;一步步的升级为 SpringCloud 模块之间的调用&#xff0c;此篇文章为第四篇&#xff0c;即介绍 Feign 和 OpenFeign 服务接口调用。 二、概述 2.1 Feign 是什么 Feign 是一…

车载诊断协议DoIP系列 —— 地址解析协议(ARP)邻居发现协议(NDP)因特网控制消息协议(ICMP)

车载诊断协议DoIP系列 —— 地址解析协议(ARP)&邻居发现协议(NDP)&因特网控制消息协议(ICMP) 我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师(Wechat:gongkenan2013)。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 本就是小人物,输…

《JAVA与模式》之装饰模式

系列文章目录 文章目录 系列文章目录前言一、装饰模式的结构二、齐天大圣的例子三、装饰模式的简化四、装饰模式的优缺点五、设计模式在JAVA I/O库中的应用前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章…

ssm蛋糕甜品商城系统(程序+文档+数据库)

** &#x1f345;点赞收藏关注 → 私信领取本源代码、数据库&#x1f345; 本人在Java毕业设计领域有多年的经验&#xff0c;陆续会更新更多优质的Java实战项目&#xff0c;希望你能有所收获&#xff0c;少走一些弯路。&#x1f345;关注我不迷路&#x1f345;** 一、研究背景…

程序人生——Java开发中通用的方法和准则,Java进阶知识汇总

目录 引出Java开发中通用的方法和准则建议1:不要在常量和变量中出现易混淆的字母建议2:莫让常量蜕变成变量建议3:三元操作符的类型务必一致建议4:避免带有变长参数的方法重载建议5:别让null值和空值威胁到变长方法建议6:覆写变长方法也循规蹈矩建议7:警惕自增的陷阱建议…

AI绘画怎么用?详细教程在这里!

AI绘画是一种利用人工智能技术来创作艺术作品的方式。以下是一个详细的AI绘画的详细教程&#xff0c;介绍AI绘画怎么用? 1. 选择合适的AI绘画工具&#xff1a;市面上有许多AI绘画工具供用户选择&#xff0c;如建e网AI、DeepArt、DALL-E等。用户可以根据自己的需求和兴趣&#…

弹出U盘时提示“该设备正在使用中”怎么办?

当我们在弹出U盘是遇到“该设备正在使用中”的提示时&#xff0c;若强行拔除U盘&#xff0c;可能会导致数据损坏或丢失&#xff0c;那么应该如何处理这种情况以使U盘安全弹出呢&#xff1f; 弹出U盘时提示“该设备正在使用中”的原因 弹出U盘时提示“该设备正在使用中”的原因…