在表格中循环插入表单

news2024/10/6 8:26:35

 

<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>

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

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

相关文章

一次生产环境上的dockerd启动失败原因分析

今夜原计划对 生产环境 上的 SDN 组件进行一次紧急扩容操作的&#xff0c;但业务基础环境中的 Docker-Engine 启动不起来了、原定计划也就无法继续进行了。 尽管查清了基础业务环境中的故障原因&#xff0c;但金主DD说今天先不干了&#xff0c;那就整理整理思路写篇流水账吧 。…

什么!Python爬虫还能帮你找老婆?

大家好&#xff0c;今天是周日&#xff0c;来点愉快的。昨天在读书的时候&#xff0c;看到一个案例说美国有一位大哥&#xff0c;为了找到一个合适的女朋友&#xff0c;写了一段代码拿到了婚恋网站的一些妹子数据&#xff0c;然后使用一些模型对数据进行分类&#xff0c;接着根…

如何制作一个包含图文视频信息的二维码如何生成?办公多功能利器!

一个包含图片、文字、视频、PDF文件等多种内容的二维码——二维彩虹H5编辑二维码正在各行各业发挥着重要作用。 和普通的二维码不同&#xff0c;H5编辑二维码可以展示更多种类&#xff08;图文视频等&#xff09;、和数量的内容&#xff0c;被广泛应用在多种办公场景。你可以将…

mysql对索引的选择简述

概述 在业务中经常会优化一些mysql的慢查询&#xff0c;通常都是使用explain去查看分析&#xff0c;检查扫描行数和索引的命中情况&#xff1b; 但是在具体索引的选择上&#xff0c;explain结果中并没有直接展示出来&#xff1b; 此时可以开启mysql的追踪优化器Trace功能&…

(golang)切片何时会创建新切片或影响原切片

什么时候切片操作会影响原切片 // 1.切片后没有触发slice的扩容机制时 什么时候对切片操作会创建新切片不影响原切片 // 2.对切片头元素进行截取的时候 // 3.当使用append时&#xff0c;len > cap则会触发扩容机制 前置&#xff1a; //slice结构体 type SliceHeader struct…

JavaWeb05-JSP

目录 一、JSP 1.概述 2.主要作用 3.快速入门 4.JSP原理 5.JSP脚本 &#xff08;1&#xff09;主要分类 6.JSP使用 7.JSP缺点 8.EL表达式 &#xff08;1&#xff09;概述 &#xff08;2&#xff09;主要功能 &#xff08;3&#xff09;使用 &#xff08;4&#xff…

Java中JDK定时任务

Java中JDK定时任务 一、JDK自带Timer1.Timer核心方法&#xff08;1&#xff09;schedule与scheduleAtFixedRate区别schedule侧重保持间隔时间的稳定scheduleAtFixedRate保持执行频率的稳定 2.java.util.TimerTask&#xff08;1&#xff09;TimerTask核心方法 3.Timer的缺陷4.Ti…

内部审计2.0时代:数字化工具和方法全面升级

文章目录 一、内部审计的发展阶段二、内部审计的逻辑架构三、内部审计数字化转型面临的问题&#xff08;1&#xff09;缺少内部审计数字化转型规划和方案&#xff08;2&#xff09;非结构化数据的采集和后续利用不足&#xff08;3&#xff09;依赖编程或使用新工具的数据分析能…

MySQL分析sql语句的性能瓶颈的几种方式介绍

在 MySQL 中&#xff0c;性能瓶颈可能会导致数据库系统运行缓慢&#xff0c;影响用户体验。为了确保数据库的性能&#xff0c;识别和解决性能瓶颈是非常重要的。以下是一些常用的方法来分析 SQL 语句的性能瓶颈&#xff1a; 1. EXPLAIN 语句 EXPLAIN 是一个强大的工具&#xff…

发布DDD脚手架到Maven仓库,IntelliJ IDEA 配置一下即可使用

这篇文章将帮助粉丝伙伴们更高效地利用小傅哥构建的DDD&#xff08;领域驱动设计&#xff09;脚手架&#xff0c;搭建工程项目&#xff0c;增强使用的便捷性。让&#x1f46c;&#x1f3fb;兄弟们直接在 IntelliJ IDEA 配置个在线的链接&#xff0c;就能直接用上这款脚手架&…

day1-C++

1>提示并输入一个字符串&#xff0c;统计该字符中大写、小写字母个数、数字个数、空格个数以及其他字符个数要求使用C风格字符串完成。 代码&#xff1a; #include <iostream> #include <string.h> using namespace std;int main() {string str ;int low 0, …

在funtion中用分号间隔还是逗号间隔

问: 回答: 这段代码是一个Vue组件方法的实现&#xff0c;名为resetForm。该方法的主要作用是关闭一个对话框&#xff08;通过设置this.dialogFormVisible false&#xff09;&#xff0c;重置表单字段&#xff08;使用this.$refs[formName].resetFields();&#xff09;&#x…

ROS机器人程序设计课程进度安排-2023-2024-2

进度安排由人工智能审核制定。 课程 教学进度表预期效果与课程内容详细描述 一、预期效果 此教学进度表旨在确保《ROS机器人程序设计》课程在2023&#xff5e;2024学年度第二学期内&#xff0c;按照预定的教学计划和进度&#xff0c;有序、高效地进行。通过本课程的教学&…

容器(0)-DOCKERFILE-安装-常用命令-部署-迁移备份-仓库

1.安装 启动 systemclt start docker //启动 systemctl status docker //状态 docker info systemclt stop docker systemctl status docker systemctl enable docker //开机启动 2.常用命令 镜像查看 docker images 镜像查看 docker status 镜像拉取 docker pull centos:…

【Spring】idea连接mysql数据库

1 MySQL安装 下载地址&#xff1a;https://dev.mysql.com/downloads/installer/ 安装server only选项&#xff0c;之后的可以选择默认安装选项 2 MySQL登录并创建数据 -- 创建数据库 create databases spring_db; use spring_db; -- 创建表 create table users (id INT AUTO…

学习大数据,所需要Java基础(9)

文章目录 网络编程实现简答客户端和服务器端的交互编写客户端编写服务端 文件上传文件上传客户端以及服务器端实现文件上传服务器端实现&#xff08;多线程&#xff09;文件上传服务器端&#xff08;连接池版本&#xff09;关闭资源工具类 BS架构服务器案例案例分析BS结构服务器…

网络请求与数据解析

urllib是Python自带的标准库中用于网络请求的库 &#xff0c;无需安装&#xff0c;直接引用即可。通常用于爬虫开发、API&#xff08;应用程序编程接口&#xff09;数据获取和测试。 urllib库的几个模块&#xff1a; urllib.request :用于打开和读取URLurllib.error:包含提出…

Jenkins插件Parameterized Scheduler用法

Jenkins定时触发构建的同时设定参数。可以根据不同的定时构建器设置不同参数或环境变量的值。可以设置多个参数。并结合when控制stage流程的执行。结合when和triggeredBy区分定时构建的stage和手动执行的stage。 目录 什么是Parameterized Scheduler&#xff1f;如何配置实现呢…

用Origin快速拟合荧光寿命、PL Decay (TRPL)数据分析处理

需要准备材料&#xff1a;Origin、PL Decay数据txt文件 首先打开Origin画图软件 导入数据&#xff0c;按照下图箭头操作直接导入 双击你要导入的PL Decay的txt数据文件&#xff0c;然后点OK 继续点OK 数据导入后首先删除最大光子数之前的无效数据&#xff0c;分析的时候用…

react中的useEffect的使用

目录 React的useEffect深度解析与实战应用 一、useEffect的基本使用 二、useEffect的依赖项数组 三、避免无限循环 四、使用清空函数进行清理 React的useEffect深度解析与实战应用 React Hooks 是 React 16.8 版本引入的新特性&#xff0c;它允许我们在不编写 class 的情况…