element表格+表单+表单验证结合运用
目录
一、结果展示
二、实现代码
一、结果展示
1、图片

2、描述
table中放form表单,放输入框或下拉框或多选框等;
点击添加按钮,首先验证表单,如果存在没填的就验证提醒,都填了就向下添加一行表单表格;
点击当前行删除按钮,清除行。
二、实现代码
<el-form :model="formother" ref="paramsForm" :rules="tablerule"><el-table :data="formother.customerAddressList" border style="width: 100%;"><el-table-column prop="consignee" label="收货人"><template slot-scope="scope"><el-form-item :prop="`customerAddressList[${scope.$index}].consignee`" :rules=" [{ required: true, message: '请输入收货人', trigger: 'blur' }]"><el-input v-model="scope.row.consignee" placeholder="请输入收货人"></el-input></el-form-item></template></el-table-column><el-table-column prop="phone" label="联系电话"><template slot-scope="scope"><el-form-item :prop="`customerAddressList[${scope.$index}].phone`":rules="[{ required: true, message: '请输入联系电话', trigger: 'blur' }]"><el-input v-model="scope.row.phone" placeholder="请输入联系电话"></el-input></el-form-item></template></el-table-column><el-table-column prop="address" label="收货地址"><template slot-scope="scope"><el-form-item :prop="`customerAddressList[${scope.$index}].address`":rules="[{ required: true, message: '请输入收货地址', trigger: 'blur' }]"><el-input v-model="scope.row.address" placeholder="请输入收货地址"></el-input></el-form-item></template></el-table-column><el-table-column prop="warehouse" label="仓库名称"><template slot-scope="scope"><el-form-item :prop="`customerAddressList[${scope.$index}].warehouse`":rules="[{ required: true, message: '请输入仓库名称', trigger: 'blur' }]"><el-input v-model="scope.row.warehouse" placeholder="请输入仓库名称"></el-input></el-form-item></template></el-table-column><el-table-column label="操作" align="center" width="100"><template slot-scope="scope"><el-button type="danger" icon="el-icon-delete" size="mini"@click="deleteParams(scope.$index)">删除</el-button></template></el-table-column></el-table></el-form>
addAddress() {this.$refs['paramsForm'].validate().then(vaild => {if (!vaild) return;this.formother.customerAddressList.push({consignee: "",phone: "",address: "",warehouse: ""})}).catch(error => {console.log(error)})},deleteParams(index) {this.formother.customerAddressList.splice(index, 1)}
相关文章:
element表格+表单+表单验证结合运用
目录 一、结果展示 二、实现代码 一、结果展示 1、图片 2、描述 table中放form表单,放输入框或下拉框或多选框等; 点击添加按钮,首先验证表单,如果存在没填的就验证提醒,都填了就向下添加一行表单表…...
亚马逊云科技发布Amazon HealthScribe,使用生成式AI技术实现临床文档的自动生成
近日,亚马逊云科技在纽约峰会上推出了Amazon HealthScribe,该服务符合HIPAA(《健康保险流通与责任法案》)的相关要求,可为医疗软件供应商提供一种基于语音和文字识别的生成式AI技术,帮助其创建能够自动生成…...
Windows11安装Linux子系统,并实现服务自启动,局域网访问,磁盘挂载
Windows11安装Linux子系统,并实现服务自启动,局域网访问,磁盘挂载 一、准备工作二、安装Linux子系统(wsl2)三、为Linux子系统设置桥接网络检查wsl版本在 Hyper-V 管理器中创建虚拟交换机创建 WSL 配置文件启动wsl 四、设置Windows开机自启动L…...
【Git】保姆级详解:Git配置SSH Key(密钥和公钥)到github
博主简介:22级计算机科学与技术本科生一枚🌸博主主页:是瑶瑶子啦每日一言🌼: “当人们做不到一些事情的时候,他们会对你说你也同样不能。”——《当幸福来敲门》 克里斯加德纳 Git配置SSH Key 一、什么是Git?二、什么…...
离线环境conda虚拟环境备份迁移--conda pack问题
1.第一步:创建虚拟环境 conda create -n pyenv --clone base 或者 conda create -n pyenv python3.8.5 --offline 命令执行结束,在路径/xxxx/anaconda/envs 下看到pyenv 或者 conda info --envs 查看罗列虚拟环境 2.第二步:打包环境 conda …...
挂载 IK 分词器至 Elasticsearch Docker 容器 - Docker Docker Compose 教程
简介 本博客将讲解如何在 Docker 和 Docker-Compose 中运行 Elasticsearch,并挂载 IK 分词器。 步骤 一、快速运行Elasticsearch:8.1.3 1.首先,我们需要创建一个新的 Docker 网络:"elastic"。这个网络会提供给我们接下来所要创…...
7.6 通俗易懂解读残差网络ResNet 手撕ResNet
一.举例通俗解释ResNet思想 假设你正在学习如何骑自行车,并且想要骑到一个遥远的目的地。你可以选择直接骑到目的地,也可以选择在途中设置几个“中转站”,每个中转站都会告诉你如何朝着目的地前进。 在传统的神经网络中,就好比只…...
robotframework+selenium 进行webui页面自动化测试
robotframework其实就是一个自动化的框架,想要进行什么样的自动化测试,就需要在这框架上添加相应的库文件,而用于webui页面自动化测试的就是selenium库. 关于robotframework框架的搭建我这里就不说了,今天就给大家根据一个登录的实…...
手机突然无法获取ip地址
在日常生活中,我们对手机的依赖越来越大,尤其是在联网方面。然而,有时候我们可能会遇到手机无法获取IP地址的问题,这给我们的正常使用带来了很多不便。当我们的手机无法获得IP地址时,我们将无法连接到互联网或局域网&a…...
C++——关于命名空间
写c项目时,大家常用到的一句话就是: using namespace std; 怎么具体解析这句话呢? 命名冲突: 在c语言中,我们有变量的命名规范,如果一个变量名或者函数名和某个库里面自带的库函数或者某个关键字重名&…...
怎么进行流程图制作?用这个工具制作很方便
怎么进行流程图制作?流程图是一种非常有用的工具,可以帮助我们更好地理解和展示各种复杂的业务流程和工作流程。它可以将复杂的过程简化为易于理解的图形和文本,使得人们更容易理解和跟踪整个流程。因此,制作流程图是在日常工作中…...
【ChatGPT 指令大全】怎么使用ChatGPT来辅助学习英语
在当今全球化的社会中,英语已成为一门世界性的语言,掌握良好的英语技能对个人和职业发展至关重要。而借助人工智能的力量,ChatGPT为学习者提供了一个有价值的工具,可以在学习过程中提供即时的帮助和反馈。在本文中,我们…...
Ubuntu20配置仅主机网络
Ubuntu20配置仅主机网络,使虚拟机与物理机网络联通且配置固定IP 进入终端:vim /etc/netplan/01-network-manager-all.yaml 修改为: network:ethernets:enp0s8:addresses: [192.168.138.108/24]dhcp4: false optional: truegateway4: 192.…...
调整奇数偶数顺序
调整数组使奇数全部都位于偶数前面。 题目: 输入一个整数数组,实现一个函数,来调整该数组中数字的顺序使得数组中所有的奇数位于数组的前半部分,所有偶数位于数组的后半部分。 思路: 1. 给定两个下标left和right&#…...
日志的规范
确定日志级别: 确保你的系统有一个明确的日志级别策略。通常,日志级别包括DEBUG,INFO,WARN,ERROR和FATAL。DEBUG级别的日志记录所有详细信息,适用于开发和调试环境。INFO级别的日志记录常规操作信息&#x…...
Spring AOP(AOP概念,组成成分,实现,原理)
目录 1. 什么是Spring AOP? 2. 为什么要用AOP? 3. AOP该怎么学习? 3.1 AOP的组成 (1)切面(Aspect) (2)连接点(join point) (3&a…...
Android WebView简单应用:构建内嵌网页浏览功能
在现代移动应用开发中,内嵌网页浏览功能是许多应用程序的常见需求。Android平台提供了WebView组件,它允许开发者将网页内容嵌入到应用中,并提供了丰富的功能和定制选项。本文将介绍如何在Android应用中使用WebView组件,帮助您快速…...
并发——乐观锁常见的两种实现方式,乐观锁的缺点
文章目录 乐观锁常见的两种实现方式1. 版本号机制2. CAS算法 乐观锁的缺点1 ABA 问题2 循环时间长开销大3 只能保证一个共享变量的原子操作 乐观锁常见的两种实现方式 乐观锁一般会使用版本号机制或CAS算法实现。 1. 版本号机制 一般是在数据表中加上一个数据版本号version字段…...
Spring 事务管理
目录 1. 事务管理 1.1. Spring框架的事务支持模型的优势 1.1.1. 全局事务 1.1.2. 本地事务 1.1.3. Spring框架的一致化编程模型 1.2. 了解Spring框架的事务抽象(Transaction Abstraction) 1.2.1. Hibernate 事务设置 1.3. 用事务同步资源 1.3.1…...
unity修改单个3D物体的重力的大小该怎么处理呢?
在Unity中修改单个3D物体的重力大小可以通过以下步骤实现: 创建一个新的C#脚本来控制重力: 首先,创建一个新的C#脚本(例如:GravityModifier.cs)并将其附加到需要修改重力的3D物体上。在脚本中,…...
【网络】每天掌握一个Linux命令 - iftop
在Linux系统中,iftop是网络管理的得力助手,能实时监控网络流量、连接情况等,帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...
Java 语言特性(面试系列1)
一、面向对象编程 1. 封装(Encapsulation) 定义:将数据(属性)和操作数据的方法绑定在一起,通过访问控制符(private、protected、public)隐藏内部实现细节。示例: public …...
大数据零基础学习day1之环境准备和大数据初步理解
学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 (1)设置网关 打开VMware虚拟机,点击编辑…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序
一、开发准备 环境搭建: 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 项目创建: File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...
服务器硬防的应用场景都有哪些?
服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式,避免服务器受到各种恶意攻击和网络威胁,那么,服务器硬防通常都会应用在哪些场景当中呢? 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...
学习STC51单片机31(芯片为STC89C52RCRC)OLED显示屏1
每日一言 生活的美好,总是藏在那些你咬牙坚持的日子里。 硬件:OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写,"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...
前端开发面试题总结-JavaScript篇(一)
文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包(Closure)?闭包有什么应用场景和潜在问题?2.解释 JavaScript 的作用域链(Scope Chain) 二、原型与继承3.原型链是什么?如何实现继承&a…...
vulnyx Blogger writeup
信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面,gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress,说明目标所使用的cms是wordpress,访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...
Chromium 136 编译指南 Windows篇:depot_tools 配置与源码获取(二)
引言 工欲善其事,必先利其器。在完成了 Visual Studio 2022 和 Windows SDK 的安装后,我们即将接触到 Chromium 开发生态中最核心的工具——depot_tools。这个由 Google 精心打造的工具集,就像是连接开发者与 Chromium 庞大代码库的智能桥梁…...
Spring Security 认证流程——补充
一、认证流程概述 Spring Security 的认证流程基于 过滤器链(Filter Chain),核心组件包括 UsernamePasswordAuthenticationFilter、AuthenticationManager、UserDetailsService 等。整个流程可分为以下步骤: 用户提交登录请求拦…...
