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物体上。在脚本中,…...
Python:操作 Excel 折叠
💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...
FFmpeg 低延迟同屏方案
引言 在实时互动需求激增的当下,无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作,还是游戏直播的画面实时传输,低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架,凭借其灵活的编解码、数据…...
(二)TensorRT-LLM | 模型导出(v0.20.0rc3)
0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述,后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作,其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...
蓝牙 BLE 扫描面试题大全(2):进阶面试题与实战演练
前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1):从基础到实战的深度解析-CSDN博客,但实际面试中,企业更关注候选人对复杂场景的应对能力(如多设备并发扫描、低功耗与高发现率的平衡)和前沿技术的…...
SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现,论文初版实现
摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序,以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务,提供稳定高效的数据处理与业务逻辑支持;利用 uniapp 实现跨平台前…...
Cloudflare 从 Nginx 到 Pingora:性能、效率与安全的全面升级
在互联网的快速发展中,高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司,近期做出了一个重大技术决策:弃用长期使用的 Nginx,转而采用其内部开发…...
Java 加密常用的各种算法及其选择
在数字化时代,数据安全至关重要,Java 作为广泛应用的编程语言,提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景,有助于开发者在不同的业务需求中做出正确的选择。 一、对称加密算法…...
css的定位(position)详解:相对定位 绝对定位 固定定位
在 CSS 中,元素的定位通过 position 属性控制,共有 5 种定位模式:static(静态定位)、relative(相对定位)、absolute(绝对定位)、fixed(固定定位)和…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个生活电费的缴纳和查询小程序
一、项目初始化与配置 1. 创建项目 ohpm init harmony/utility-payment-app 2. 配置权限 // module.json5 {"requestPermissions": [{"name": "ohos.permission.INTERNET"},{"name": "ohos.permission.GET_NETWORK_INFO"…...
全志A40i android7.1 调试信息打印串口由uart0改为uart3
一,概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本:2014.07; Kernel版本:Linux-3.10; 二,Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01),并让boo…...
