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.mzph.cn/news/771367.shtml

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

相关文章

JavaWeb项目——MVC架构框架

表现层&#xff08;UI&#xff09;&#xff1a;直接跟前端打交互&#xff08;一是接收前端ajax请求&#xff0c;二是返回json数据给前端&#xff09;业务逻辑层&#xff08;BLL&#xff09;&#xff1a;一是处理表现层转发过来的前端请求&#xff08;也就是具体业务&#xff09…

回溯组合求和算法---去重

给定一个数组 candidates 和一个目标数 target &#xff0c;找出 candidates 中所有可以使数字和为 target 的组合。 candidates 中的每个数字在每个组合中只能使用一次。 说明&#xff1a; 所有数字&#xff08;包括目标数&#xff09;都是正整数。解集不能包含重复的组合。 …

Ollama部署马斯克Grok-1模型

llama.cpp支持 近日llama.cpp添加了对grok-1模型的支持。 PR 6404 GGUF模型 并且在Hugging Face上有大佬放出了Grok-1的非官方GGUF量化模型。 目前可供下载的量化模型: Ollama支持 在ollama官网&#xff0c;有大佬也已经上传了Grok-1模型。 资源充足的各位可以选择适合自…

【C++】详解 to_string 与 to_stoi 函数(整数转字符串-字符串转整数)

目录 一、前言 二、什么是 to_string - to_stoi 三、to_string ✨作用 ✨测试代码&#xff1a; 四、to_stoi ✨作用 ✨测试代码&#xff1a; 五、力扣常考面试题 ✨ 例题 1 ✨例题 2 六、共勉 一、前言 想必大家在做 LeetCode 算法题的时候会经常看到有使用 to_string 和…

Linux(centos7)部署hadoop集群

部署环境要求:已完成JDK环境部署、配置完成固定IP、SSH免费登录、防火墙关闭等。 1、下载、上传主机 官网:https://hadoop.apache.org 2、解压缩、创建软连接 解压: tar -zxvf hadoop-3.3.6.tar.gz软连接: ln -s /usr/local/apps/hadoop-3.3.6 hadoop3、文件配置 hadoo…

postgresql中常用的函数:length、concat、as、substring、random

参考博客&#xff1a;postgresql中常用的函数&#xff1a;length、concat、as、substring、random

云原生周刊:Kubernetes v1.30 一瞥 | 2024.3.25

开源项目推荐 Retina Retina 是一个与云无关的开源 Kubernetes 网络可观测平台&#xff0c;它提供了一个用于监控应用程序运行状况、网络运行状况和安全性的集中中心。它为集群网络管理员、集群安全管理员和 DevOps 工程师提供可操作的见解&#xff0c;帮助他们了解 DevOps、…

【分解定理】分解定理I、II、III

分解定理I 设&#xff0c;则 设&#xff0c;则 分解定理II 设&#xff0c;则 设&#xff0c;则 分解定理III 设&#xff0c;集值映射 且对任意的&#xff0c;有&#xff0c;则 1. 2.设&#xff0c;若&#xff0c;则 3.若&#xff0c;则&#xff1b;若&#xff0c;则 小结…

微信支付服务商处理消费者投诉管理,支持多服务商

大家好&#xff0c;我是小悟 1、问题背景 玩过微信支付生态的&#xff0c;或许就有这种感受&#xff0c;如果收到投诉单&#xff0c;不会通知到手机端&#xff0c;在服务商模式下&#xff0c;只会在微信支付服务商平台-合作伙伴功能-投诉处理那里显示。那你能一直盯着电脑看吗…

nandgame中的寄存器

只有当st and cl 1时&#xff0c;d0 d1的数据通路才会打通。 修改为&#xff1a;st决定通路是否联通&#xff0c;cl从0到1决定一次赋值&#xff08;数据传递&#xff09;。

Linux——进程程序替换

替换原理 用fork创建子进程后执行的是和父进程相同的程序(但有可能执行不同的代码分支),子进程往往要调用一种exec函数 以执行另一个程序。当进程调用一种exec函数时,该进程的用户空间代码和数据完全被新程序替换,从新程序的启动 例程开始执行。调用exec并不创建新进程,所以调用…

RWTH-PHOENIX Weather数据集模型说明和下载

RWTH-PHOENIX Weather 2014 T数据集说明: 德国公共电视台PHOENIX在三年内(2009 年至 2011 年) 录制了配有手语翻译的每日新闻和天气预报节目,并使用注释符号转录了 386 个版本的天气预报。 此外,我们使用自动语音识别和手动清理来转录原始德语语音。因此,该语料库允许训练…

Blast Layer2集成Covalent数据集,提升以太坊dApps拓展能力

Covalent Network&#xff08;CQT&#xff09; 作为行业领先的多链索引器&#xff0c;正着手与 Blast 进行一项激动人心的合作。Blast 是一个独特的 Layer2 扩展方案&#xff0c;旨在解决以太坊网络所面临的可扩展性挑战。目前&#xff0c;Covalent Network&#xff08;CQT&…

期货开户的几个阶段和境界

期市论剑&#xff0c;谁是英雄&#xff0c;每个在期货市场上的人们无时不刻不在努力成为市场上的高手之列&#xff0c;可是期货市场和经济原理是一样的&#xff0c;市场上的人们依水平高低从上至下以金宝塔式排列&#xff0c;利益则成倒倒金字塔排列&#xff0c;也就是塔尖上的…

wkt转geojson

1、js实现&#xff0c;以polygon为例wkt转geojson function processPolygonString2PolygonArray(polygonString, proj) {var geoJson {};if (polygonString.startsWith("MULTIPOLYGON")) {// 多面geoJson["type"] "MultiPolygon";var firstLe…

Redis Geo:解锁地理位置数据的新可能性

Redis Geo 是 Redis 提供的一种地理位置信息存储和查询的功能&#xff0c;通过使用 Geo 数据结构&#xff0c;可以方便地存储地理位置的经纬度坐标&#xff0c;并支持根据位置进行附近位置查询等操作。 Redis Geo 的所有命令详解和示例 GEOADD key longitude latitude member …

ensp中pc机访问不同网络的服务器

拓扑图如下&#xff0c;资源已上传 说明&#xff1a;pc通过2个路由访问server服务器 三条线路分别是192.168.1.0网段&#xff0c;192.168.2.0网段和192.168.3.0网段&#xff0c;在未配置的情况下&#xff0c;pc设备是访问不到server的 具体操作流程 第一&#xff1b;pc设备…

企业微信更改主体的怎么进行线上公证?

企业微信变更主体有什么作用&#xff1f; 做过企业运营的小伙伴都知道&#xff0c;很多时候经常会遇到现有的企业需要注销&#xff0c;切换成新的企业进行经营的情况&#xff0c;但是原来企业申请的企业微信上面却积累了很多客户&#xff0c;肯定不能直接丢弃&#xff0c;所以这…

HCIA-Datacom H12-811 题库补充(3/26)

完整题库及答案解析&#xff0c;请直接扫描上方二维码&#xff0c;持续更新中 管理员想要彻底删除旧的设备配置文件<config.zip>&#xff0c;则下面的命令正确的是() A&#xff1a;reset config.zip B&#xff1a;delete/unreserved config.zip C&#xff1a;clear co…

Docker搭建LNMP环境实战(01):前言

缘起&#xff1a;不久前学习了Docker相关知识&#xff0c;并在Docker环境下学习了LNMP环境的搭建。由于网上的文章大多没有翔实、可行的案例&#xff0c;很多文章都是断章取义&#xff0c;所以&#xff0c;期间踩了太多太多的坑&#xff0c;初学者想要真正顺利地搭建一套环境起…