element表格+表单+表单验证结合u
一、结果展示
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表格+表单+表单验证结合u
一、结果展示 1、图片 2、描述 table中放form表单,放输入框或下拉框或多选框等; 点击添加按钮,首先验证表单,如果存在没填的就验证提醒,都填了就向下添加一行表单表格; 点击当前行删除按钮,…...
数据库:MYSQL参数max_allowed_packet 介绍
1、参数作用 max_allowed_packet参数是指mysql服务器端和客户端在一次传送数据包的过程当中最大允许的数据包大小。如果超过了设置的最大长度,则会数据库保持数据失败。 2、问题场景 ● 有时候业务的需要,可能会存在某些字段数据长度非常大(比如富文本编辑器里面的内容),…...
基于DiscordMidjourney API接口实现文生图
https://discord.com/api/v9/interactions 请求头: authorization:取自 浏览器中discord 文生图请求头中的 authorization 的值 Content-Type:application/json 请求体: {“type”:2,“application_id”:“93692956130267xxxx”,“guild_id”:“1135900…...
springboot+vue农产品特产商城销售平台_50kf2 多商家
随着我国经济的高速发展与人们生活水平的日益提高,人们对生活质量的追求也多种多样。尤其在人们生活节奏不断加快的当下,人们更趋向于足不出户解决生活上的问题,南阳特产销售平台展现了其蓬勃生命力和广阔的前景。与此同时,为解决…...
【深度学习_TensorFlow】感知机、全连接层、神经网络
写在前面 感知机、全连接层、神经网络是什么意思? 感知机: 是最简单的神经网络结构,可以对线性可分的数据进行分类。 全连接层: 是神经网络中的一种层结构,每个神经元与上一层的所有神经元相连接,实现全连接。 神经…...
软件测试(功能、接口、性能、自动化)详解
一、软件测试功能测试 测试用例编写是软件测试的基本技能;也有很多人认为测试用例是软件测试的核心;软件测试中最重要的是设计和生成有效的测试用例;测试用例是测试工作的指导,是软件测试的必须遵守的准则。 黑盒测试常见测试用…...
Oracle表段中的高水位线HWM
在Oracle数据的存储中,可以把存储空间想象为一个水库,数据想象为水库中的水。水库中的水的位置有一条线叫做水位线,在Oracle中,这条线被称为高水位线(High-warter mark, HWM)。在数据库表刚建立的时候&…...
【福建事业单位-推理判断】03类别推理
【福建事业单位-推理判断】03类别推理 一、类别推理1.1语义关系考点一、近义反义关系(不需要严格的,意思相近即可)近义反义的二级辨析(感情色彩)考点二:比喻义、象征义 1.2 逻辑关系1.2.1全同关系ÿ…...
Leetcode-每日一题【剑指 Offer 05. 替换空格】
题目 请实现一个函数,把字符串 s 中的每个空格替换成"%20"。 示例 1: 输入:s "We are happy."输出:"We%20are%20happy." 限制: 0 < s 的长度 < 10000 解题思路 前置知识 Str…...
zookeeper+kafka分布式消息队列集群的部署
目录 一、zookeeper 1.Zookeeper 定义 2.Zookeeper 工作机制 3.Zookeeper 特点 4.Zookeeper 数据结构 5.Zookeeper 应用场景 (1)统一命名服务 (2)统一配置管理 (3)统一集群管理 (4&…...
VR全景旅游,智慧文旅发展新趋势!
引言: VR全景旅游正在带领我们踏上一场全新的旅行体验。这种沉浸式的旅行方式,让我们可以足不出户,却又身临其境地感受世界各地的美景。 一.VR全景旅游是什么? VR全景旅游是一种借助虚拟现实技术,让用户…...
详解EMBER数据集中对PE文件提取ByteEntropyHistogram特征
1. 引入 在我们对PE文件提取特征时,经常会在PE特征工程的项目中,看到如下这段代码 class ByteEntropyHistogram(FeatureType): 2d byte/entropy histogram based loosely on (Saxe and Berlin, 2015).This roughly approximates the joint probability…...
垃圾回收机制和常用的算法
一.什么是垃圾回收? 垃圾回收主要针对堆和方法区(非堆),程序计数器,虚拟机栈,本地方法栈这三个区域属于线程私有,随着线程的销毁,自然就会雄安会了,因此不需要堆着三个区域进行垃圾…...
【PostgreSQL】系列之 一 schema详解(二)
🍁 博主 "开着拖拉机回家"带您 Go to New World.✨🍁 🦄 个人主页——🎐开着拖拉机回家_Linux,Java基础学习,大数据运维-CSDN博客 🎐✨🍁 🪁🍁 希望本文能够给您带来一定的…...
性能优化-react路由懒加载和组件懒加载
背景 随着项目越来越大,打包后的包体积也越来越大,严重影响了首屏加载速度,需要对路由和组件做懒加载处理 主要用到了react中的lazy和Suspense。 废话不多说,直接上干货 路由懒加载 核心代码 import React, { lazy, Suspens…...
静态网页加速器:优化性能和交付速度的 Node.js 最佳实践
如何使用 Node.js 发布静态网页 在本文中,我们将介绍如何使用 Node.js 来发布静态网页。我们将创建一个简单的 Node.js 服务器,将 HTML 文件作为响应发送给客户端。这是一个简单而灵活的方法,适用于本地开发和轻量级应用。 1、创建静态网页…...
Spring 非自定义Bean注解
Spring 非自定义Bean注解 1.概述 在xml中配置的Bean都是自己定义的, 例如:UserDaolmpl,UserServicelmpl。但是,在实际开发中有些功能类并不是我们自己定义的, 而是使用的第三方jar包中的,那么,…...
微信小程序:点击按钮实现数据加载(带模糊查询)
效果图 代码 wxml: <!-- 搜索框--> <form action"" bindsubmit"search_all_productiond"><view class"search_position"><view class"search"><view class"search_left">工单号:</view…...
2023-2029年中国烘焙工坊市场经营管理风险与未来竞争优势分析报告
2023-2029年中国烘焙工坊市场经营管理风险与未来竞争优势分析报告 ################################### 《报告编号》: BG460671 《出版时间》: 2023年8月 《出版机构》: 中智正业研究院 免费售后 服务一年,具体内容及订购流程欢迎咨询客服人员 内容简介&…...
用Rust实现23种设计模式之适配器
关注我,学习Rust不迷路 在 Rust 中,可以使用结构体和 trait 来实现适配器模式。适配器模式是一种结构型设计模式,它允许将一个类的接口转换为客户端所期望的另一个接口。下面是一个使用 Rust 实现适配器模式的示例,带有详细的注释…...
练习(含atoi的模拟实现,自定义类型等练习)
一、结构体大小的计算及位段 (结构体大小计算及位段 详解请看:自定义类型:结构体进阶-CSDN博客) 1.在32位系统环境,编译选项为4字节对齐,那么sizeof(A)和sizeof(B)是多少? #pragma pack(4)st…...
关于nvm与node.js
1 安装nvm 安装过程中手动修改 nvm的安装路径, 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解,但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后,通常在该文件中会出现以下配置&…...
DIY|Mac 搭建 ESP-IDF 开发环境及编译小智 AI
前一阵子在百度 AI 开发者大会上,看到基于小智 AI DIY 玩具的演示,感觉有点意思,想着自己也来试试。 如果只是想烧录现成的固件,乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外,还提供了基于网页版的 ESP LA…...
ArcGIS Pro制作水平横向图例+多级标注
今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作:ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等(ArcGIS出图图例8大技巧),那这次我们看看ArcGIS Pro如何更加快捷的操作。…...
OPENCV形态学基础之二腐蚀
一.腐蚀的原理 (图1) 数学表达式:dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一,腐蚀跟膨胀属于反向操作,膨胀是把图像图像变大,而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...
在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的?
uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件,用于在原生应用中加载 HTML 页面: 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...
【Java学习笔记】BigInteger 和 BigDecimal 类
BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点:传参类型必须是类对象 一、BigInteger 1. 作用:适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...
【无标题】路径问题的革命性重构:基于二维拓扑收缩色动力学模型的零点隧穿理论
路径问题的革命性重构:基于二维拓扑收缩色动力学模型的零点隧穿理论 一、传统路径模型的根本缺陷 在经典正方形路径问题中(图1): mermaid graph LR A((A)) --- B((B)) B --- C((C)) C --- D((D)) D --- A A -.- C[无直接路径] B -…...
C++课设:简易日历程序(支持传统节假日 + 二十四节气 + 个人纪念日管理)
名人说:路漫漫其修远兮,吾将上下而求索。—— 屈原《离骚》 创作者:Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊) 专栏介绍:《编程项目实战》 目录 一、为什么要开发一个日历程序?1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...
快刀集(1): 一刀斩断视频片头广告
一刀流:用一个简单脚本,秒杀视频片头广告,还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农,平时写代码之余看看电影、补补片,是再正常不过的事。 电影嘛,要沉浸,…...
