当前位置: 首页 > news >正文

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表单&#xff0c;放输入框或下拉框或多选框等&#xff1b; 点击添加按钮&#xff0c;首先验证表单&#xff0c;如果存在没填的就验证提醒&#xff0c;都填了就向下添加一行表单表格&#xff1b; 点击当前行删除按钮&#xff0c;…...

数据库:MYSQL参数max_allowed_packet 介绍

1、参数作用 max_allowed_packet参数是指mysql服务器端和客户端在一次传送数据包的过程当中最大允许的数据包大小。如果超过了设置的最大长度,则会数据库保持数据失败。 2、问题场景 ● 有时候业务的需要,可能会存在某些字段数据长度非常大(比如富文本编辑器里面的内容),…...

基于DiscordMidjourney API接口实现文生图

https://discord.com/api/v9/interactions 请求头&#xff1a; authorization:取自 浏览器中discord 文生图请求头中的 authorization 的值 Content-Type:application/json 请求体&#xff1a; {“type”:2,“application_id”:“93692956130267xxxx”,“guild_id”:“1135900…...

springboot+vue农产品特产商城销售平台_50kf2 多商家

随着我国经济的高速发展与人们生活水平的日益提高&#xff0c;人们对生活质量的追求也多种多样。尤其在人们生活节奏不断加快的当下&#xff0c;人们更趋向于足不出户解决生活上的问题&#xff0c;南阳特产销售平台展现了其蓬勃生命力和广阔的前景。与此同时&#xff0c;为解决…...

【深度学习_TensorFlow】感知机、全连接层、神经网络

写在前面 感知机、全连接层、神经网络是什么意思&#xff1f; 感知机&#xff1a; 是最简单的神经网络结构&#xff0c;可以对线性可分的数据进行分类。 全连接层&#xff1a; 是神经网络中的一种层结构&#xff0c;每个神经元与上一层的所有神经元相连接,实现全连接。 神经…...

软件测试(功能、接口、性能、自动化)详解

一、软件测试功能测试 测试用例编写是软件测试的基本技能&#xff1b;也有很多人认为测试用例是软件测试的核心&#xff1b;软件测试中最重要的是设计和生成有效的测试用例&#xff1b;测试用例是测试工作的指导&#xff0c;是软件测试的必须遵守的准则。 黑盒测试常见测试用…...

Oracle表段中的高水位线HWM

在Oracle数据的存储中&#xff0c;可以把存储空间想象为一个水库&#xff0c;数据想象为水库中的水。水库中的水的位置有一条线叫做水位线&#xff0c;在Oracle中&#xff0c;这条线被称为高水位线&#xff08;High-warter mark, HWM&#xff09;。在数据库表刚建立的时候&…...

【福建事业单位-推理判断】03类别推理

【福建事业单位-推理判断】03类别推理 一、类别推理1.1语义关系考点一、近义反义关系&#xff08;不需要严格的&#xff0c;意思相近即可&#xff09;近义反义的二级辨析&#xff08;感情色彩&#xff09;考点二&#xff1a;比喻义、象征义 1.2 逻辑关系1.2.1全同关系&#xff…...

Leetcode-每日一题【剑指 Offer 05. 替换空格】

题目 请实现一个函数&#xff0c;把字符串 s 中的每个空格替换成"%20"。 示例 1&#xff1a; 输入&#xff1a;s "We are happy."输出&#xff1a;"We%20are%20happy." 限制&#xff1a; 0 < s 的长度 < 10000 解题思路 前置知识 Str…...

zookeeper+kafka分布式消息队列集群的部署

目录 一、zookeeper 1.Zookeeper 定义 2.Zookeeper 工作机制 3.Zookeeper 特点 4.Zookeeper 数据结构 5.Zookeeper 应用场景 &#xff08;1&#xff09;统一命名服务 &#xff08;2&#xff09;统一配置管理 &#xff08;3&#xff09;统一集群管理 &#xff08;4&…...

VR全景旅游,智慧文旅发展新趋势!

引言&#xff1a; VR全景旅游正在带领我们踏上一场全新的旅行体验。这种沉浸式的旅行方式&#xff0c;让我们可以足不出户&#xff0c;却又身临其境地感受世界各地的美景。 一&#xff0e;VR全景旅游是什么&#xff1f; VR全景旅游是一种借助虚拟现实技术&#xff0c;让用户…...

详解EMBER数据集中对PE文件提取ByteEntropyHistogram特征

1. 引入 在我们对PE文件提取特征时&#xff0c;经常会在PE特征工程的项目中&#xff0c;看到如下这段代码 class ByteEntropyHistogram(FeatureType): 2d byte/entropy histogram based loosely on (Saxe and Berlin, 2015).This roughly approximates the joint probability…...

垃圾回收机制和常用的算法

一.什么是垃圾回收&#xff1f; 垃圾回收主要针对堆和方法区&#xff08;非堆&#xff09;,程序计数器&#xff0c;虚拟机栈&#xff0c;本地方法栈这三个区域属于线程私有&#xff0c;随着线程的销毁&#xff0c;自然就会雄安会了&#xff0c;因此不需要堆着三个区域进行垃圾…...

【PostgreSQL】系列之 一 schema详解(二)

&#x1f341; 博主 "开着拖拉机回家"带您 Go to New World.✨&#x1f341; &#x1f984; 个人主页——&#x1f390;开着拖拉机回家_Linux,Java基础学习,大数据运维-CSDN博客 &#x1f390;✨&#x1f341; &#x1fa81;&#x1f341; 希望本文能够给您带来一定的…...

性能优化-react路由懒加载和组件懒加载

背景 随着项目越来越大&#xff0c;打包后的包体积也越来越大&#xff0c;严重影响了首屏加载速度&#xff0c;需要对路由和组件做懒加载处理 主要用到了react中的lazy和Suspense。 废话不多说&#xff0c;直接上干货 路由懒加载 核心代码 import React, { lazy, Suspens…...

静态网页加速器:优化性能和交付速度的 Node.js 最佳实践

如何使用 Node.js 发布静态网页 在本文中&#xff0c;我们将介绍如何使用 Node.js 来发布静态网页。我们将创建一个简单的 Node.js 服务器&#xff0c;将 HTML 文件作为响应发送给客户端。这是一个简单而灵活的方法&#xff0c;适用于本地开发和轻量级应用。 1、创建静态网页…...

Spring 非自定义Bean注解

Spring 非自定义Bean注解 1.概述 在xml中配置的Bean都是自己定义的&#xff0c; 例如&#xff1a;UserDaolmpl&#xff0c;UserServicelmpl。但是&#xff0c;在实际开发中有些功能类并不是我们自己定义的&#xff0c; 而是使用的第三方jar包中的&#xff0c;那么&#xff0c…...

微信小程序:点击按钮实现数据加载(带模糊查询)

效果图 代码 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月 《出版机构》: 中智正业研究院 免费售后 服务一年&#xff0c;具体内容及订购流程欢迎咨询客服人员 内容简介&…...

用Rust实现23种设计模式之适配器

关注我&#xff0c;学习Rust不迷路 在 Rust 中&#xff0c;可以使用结构体和 trait 来实现适配器模式。适配器模式是一种结构型设计模式&#xff0c;它允许将一个类的接口转换为客户端所期望的另一个接口。下面是一个使用 Rust 实现适配器模式的示例&#xff0c;带有详细的注释…...

循环冗余码校验CRC码 算法步骤+详细实例计算

通信过程&#xff1a;&#xff08;白话解释&#xff09; 我们将原始待发送的消息称为 M M M&#xff0c;依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)&#xff08;意思就是 G &#xff08; x ) G&#xff08;x) G&#xff08;x) 是已知的&#xff09;&#xff0…...

Cloudflare 从 Nginx 到 Pingora:性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

三体问题详解

从物理学角度&#xff0c;三体问题之所以不稳定&#xff0c;是因为三个天体在万有引力作用下相互作用&#xff0c;形成一个非线性耦合系统。我们可以从牛顿经典力学出发&#xff0c;列出具体的运动方程&#xff0c;并说明为何这个系统本质上是混沌的&#xff0c;无法得到一般解…...

OpenLayers 分屏对比(地图联动)

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能&#xff0c;和卷帘图层不一样的是&#xff0c;分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

React---day11

14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store&#xff1a; 我们在使用异步的时候理应是要使用中间件的&#xff0c;但是configureStore 已经自动集成了 redux-thunk&#xff0c;注意action里面要返回函数 import { configureS…...

打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用

一、方案背景​ 在现代生产与生活场景中&#xff0c;如工厂高危作业区、医院手术室、公共场景等&#xff0c;人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式&#xff0c;存在效率低、覆盖面不足、判断主观性强等问题&#xff0c;难以满足对人员打手机行为精…...

day36-多路IO复用

一、基本概念 &#xff08;服务器多客户端模型&#xff09; 定义&#xff1a;单线程或单进程同时监测若干个文件描述符是否可以执行IO操作的能力 作用&#xff1a;应用程序通常需要处理来自多条事件流中的事件&#xff0c;比如我现在用的电脑&#xff0c;需要同时处理键盘鼠标…...

给网站添加live2d看板娘

给网站添加live2d看板娘 参考文献&#xff1a; stevenjoezhang/live2d-widget: 把萌萌哒的看板娘抱回家 (ノ≧∇≦)ノ | Live2D widget for web platformEikanya/Live2d-model: Live2d model collectionzenghongtu/live2d-model-assets 前言 网站环境如下&#xff0c;文章也主…...

算术操作符与类型转换:从基础到精通

目录 前言&#xff1a;从基础到实践——探索运算符与类型转换的奥秘 算术操作符超级详解 算术操作符&#xff1a;、-、*、/、% 赋值操作符&#xff1a;和复合赋值 单⽬操作符&#xff1a;、--、、- 前言&#xff1a;从基础到实践——探索运算符与类型转换的奥秘 在先前的文…...

向量几何的二元性:叉乘模长与内积投影的深层联系

在数学与物理的空间世界中&#xff0c;向量运算构成了理解几何结构的基石。叉乘&#xff08;外积&#xff09;与点积&#xff08;内积&#xff09;作为向量代数的两大支柱&#xff0c;表面上呈现出截然不同的几何意义与代数形式&#xff0c;却在深层次上揭示了向量间相互作用的…...