el-table增加/编辑打开el-dialog内嵌套el-form,解决编辑重置表单不成功等问题

需求:在做表格的增删改查,其中新增和编辑弹窗都是同一个弹窗,之后有个重置按钮,需要用户输入的时候可以重置清空等。本文章解决如下问题

1.就是在编辑数据回填后点击重置表单没有清空也没有报错

2.解决清空表单和表格数据相互影响问题

3.解决新增和编辑数据相互影响问题,保留了只添加数据暂存功能

1.问题复现

1.1 问题1复现

1.2 问题2复现

1.3先点编辑再点新增,数据没清空

2.效果

3.关键代码

1.表单和表格相互影响,使用JSON深拷贝,让引用和被引用对象不会相互影响,之后resetFields失效,是因为编辑打开弹窗后初始值默认就是编辑的内容了,所以表单不会被重置为空字符串,需要使用 this.$nextTick来让弹窗先打开,之后再进行赋值的操作

 editData(row) {this.dialogVisible = true;this.$nextTick(() => {this.ruleForm = JSON.parse(JSON.stringify(row));});},

2.新增暂存,之后编辑编辑后数据清空

这边我还清空了表单校验clearValidate,不然第二次点开还是会有校验的提示信息

 cancel(formName) {this.dialogVisible = false;this.$refs[formName].clearValidate();if (this.ruleForm.id) {this.$refs[formName].resetFields();}}

4.完整代码

<template><div style="width: 600px; margin-top: 50px"><!-- v-model修饰符 --><el-button type="primary" size="default" @click="addData()">添加</el-button><el-table :data="tableData" border style="width: 100%"><el-table-column fixed prop="date" label="日期" width="150"> </el-table-column><el-table-column prop="name" label="姓名" width="120"> </el-table-column><el-table-column prop="province" label="省份" width="120"> </el-table-column><el-table-column prop="city" label="市区" width="120"> </el-table-column><el-table-column prop="address" label="地址" width="300"> </el-table-column><el-table-column prop="zip" label="邮编" width="120"> </el-table-column><el-table-column fixed="right" label="操作" width="100"><template slot-scope="scope"><el-button type="text" size="small" @click="editData(scope.row)">编辑</el-button></template></el-table-column></el-table><el-dialog :title="ruleForm.id ? '编辑' : '新增'" :visible.sync="dialogVisible" width="30%"><el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"><el-form-item label="姓名" prop="name"><el-input v-model="ruleForm.name"></el-input></el-form-item><el-form-item label="日期" prop="date"><el-select v-model="ruleForm.date" placeholder="请选择活动区域"><el-option label="区域一" value="shanghai"></el-option><el-option label="区域二" value="beijing"></el-option></el-select> </el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="cancel('ruleForm')">取 消</el-button><el-button @click="resetForm('ruleForm')">重 置</el-button><el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button></span></el-dialog></div>
</template><script>
export default {data() {return {dialogVisible: false,tableData: [{id: 1,date: '2016-05-02',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333},{id: 2,date: '2016-05-04',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1517 弄',zip: 200333}],ruleForm: {name: '',date: ''},rules: {name: [{ required: true, message: '请输入活动名称', trigger: 'blur' },{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }],date: [{ required: true, message: '请选择活动区域', trigger: 'change' }]}};},methods: {addData() {this.ruleForm.id = 0;this.dialogVisible = true;},submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {alert('submit!');} else {console.log('error submit!!');return false;}});},resetForm(formName) {this.$refs[formName].resetFields();},editData(row) {this.dialogVisible = true;this.$nextTick(() => {this.ruleForm = JSON.parse(JSON.stringify(row));});},cancel(formName) {this.dialogVisible = false;this.$refs[formName].clearValidate();if (this.ruleForm.id) {this.$refs[formName].resetFields();}}}
};
</script><style lang="scss" scoped></style>

文章到此结束,希望对你有所帮助~~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/695510.shtml

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

相关文章

C-MAPSS涡扇发动机仿真数据(PHM2008)

数据集介绍 在开始介绍数据集之前&#xff0c;先帮大家理清一下涡扇发动机的数据&#xff08;NASA提供&#xff0c;本文中称为数据集A&#xff09;和PHM2008竞赛数据&#xff08;本文称为数据集B&#xff09;的关系。之所以将数据集A和数据集B放在一篇文章中&#xff0c;是因为…

【论文解读】transformer小目标检测综述

目录 一、简要介绍 二、研究背景 三、用于小目标检测的transformer 3.1 Object Representation 3.2 Fast Attention for High-Resolution or Multi-Scale Feature Maps 3.3 Fully Transformer-Based Detectors 3.4 Architecture and Block Modifications 3.6 Improved …

MT8788|MTK8788安卓核心板参数_4G联发科MTK模块

MT8788核心板是一款功能强大的4G全网通安卓智能模块。该模块采用了联发科AIOT芯片平台&#xff0c;具有长达8年的生命周期。MT8788模块内置了12nm制程的八核处理器&#xff0c;包括4个Cortex A73和4个Coretex A53&#xff0c;主频最高可达2.0GHZ。标配内存为4GB64GB&#xff0c…

01 Linux简介

Linux背景 发展史 linux从哪来的&#xff1f;怎么发展的&#xff1f;得从UNIX说起 1968年&#xff0c;一些来自通用电气公司、贝尔实验室和麻省理工学院的研究人员开发了一个名叫Multics的特殊操作系统。Multics在多任务文件管理和用户连接中综合了许多新概念1969-1970年&am…

智能运维服务指的是哪些?智能运维阶段有哪些

智能运维服务通常包含哪些关键组成部分&#xff1f;它们在IT管理中的作用和重要性&#xff1f;智能运维的发展可以分为哪些主要阶段&#xff1f;每个阶段的核心技术或实践有哪些&#xff0c;它们是如何推动运维工作向更高水平的自动化和智能化发展的&#xff1f; 智能运维服务…

Linux离线安装插件

当公司Linux环境无外网情况下&#xff0c;需要先下载好离线安装包&#xff0c;然后上传到服务器&#xff0c;进行安装。 这里介绍一个下载插件安装包的网站&#xff0c;可以搜索到lrzsz、lsof、telnet、unzip、zip等安装包 搜索到想要的插件安装包后&#xff0c;下载并上传到服…

Ubuntu20.04安装Carla0.9.15

文章目录 环境要求下载Carla解压Carla运行Carla测试官方用例创建python环境安装依赖包案例&#xff1a;生成车辆案例&#xff1a;测试自动驾驶 参考链接 环境要求 系统配置要求&#xff1a; 至少3G显存的GPU&#xff0c;推荐3060及以上的显卡进行Carla拟真。预留足够的硬盘空…

Tomcat线程池原理(上篇:初始化原理)

文章目录 前言正文一、从启动脚本开始分析二、ProtocolHandler 的启动原理三、AbstractEndPoint 的启动原理四、创建默认线程池五、参数配置原理5.1 常规的参数配置5.2 自定义线程池5.3 测试自定义线程 前言 在Java Web的开发过程中&#xff0c;Tomcat常用的web容器。SpringBo…

C#知识点-13(进程、多线程、使用Socket实现服务器与客户端通信)

进程 定义&#xff1a;每一个正在运行的应用程序&#xff0c;都是一个进程 进程不等于正在运行的应用程序。而是为应用程序的运行构建一个运行环境 Process[] pros Process.GetProcesses();//获取电脑中所有正在运行的进程//通过进程&#xff0c;直接打开文件//告诉进程&…

cmd命令开启windows桌面远程控制并设置防火墙允许远程

cmd命令开启桌面远程控制 1、开启之前&#xff1a; 2、使用管理员身份运行cmd 3、执行cmd命令 reg add "HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlset\Control\Terminal server" /v fDenyTSConnections /t REG_DWORD /d 0 /f4、如果这台电脑的防火墙打开&#xff…

Android14 InputManager-InputManagerService环境的构造

IMS分为Java层与Native层两个部分&#xff0c;其启动过程是从Java部分的初始化开始&#xff0c;进而完成Native部分的初始化。 □创建新的IMS对象。 □调用IMS对象的start&#xff08;&#xff09;函数完成启动 同其他系统服务一样&#xff0c;IMS在SystemServer中的ServerT…

股票K线认知从形态到逻辑,仓位管理与交易体系实战

一、教程描述 本套教程内容分为三个部分&#xff0c;1、基础篇&#xff1a;讲的都是干货基础&#xff0c;有些是书本上没有的&#xff0c;通过对基础知识的掌握&#xff0c;对技术形态会有更深的理解&#xff0c;比如集合竞价、K线指标、盘中看盘技巧等等。2、交易篇&#xff…

CentOS升级python

1、下载python39 https://mirrors.huaweicloud.com/python/3.9.0/Python-3.9.0.tgz2、拷贝到Linux环境&#xff08;当然也可以直接在Linux环境使用wget直接下载&#xff09; 先安装一下依赖&#xff0c;不然编译会有问题 sudo yum -y install zlib-devel bzip2-devel openssl…

【day02】每天三道 java后端面试题:Java、C++和Go的区别 | Redis的特点和应用场景 | 计算机网络七层模型

文章目录 1. Java、C和 Go 语言的区别&#xff0c;各自的优缺点&#xff1f;2. 什么是Redis&#xff1f;Redis 有哪些特点&#xff1f; Redis有哪些常见的应用场景&#xff1f;3. 简述计算机网络七层模型和各自的作用&#xff1f; 1. Java、C和 Go 语言的区别&#xff0c;各自的…

C#算法(12)—对图像像素做X/Y方向的偏移

我们在上位机开发领域有时候需要对获取的图像的像素做整体的偏移,比如所有像素在X方向上偏移几个像素,或者所有像素在Y方向上偏移几个像素,本文就是开发了像素整体偏移算法来解决这个问题。 比如有一个图像大小为3*3,像素值如下图1,如果我想实现将这个幅图像的像素整体往右…

Neon简介

欢迎关注“安全有理”微信公众号。 概述 本文介绍了 Arm Neon 技术&#xff0c;一种⾼级 SIMD&#xff08;Single Instruction Multiple Data&#xff0c;一条指令操作多个数据&#xff09;架构扩展&#xff0c;Armv8‑A 和 Armv8-R 架构支持了 Neon 技术扩展。 Neon 技术是指…

探索海洋世界,基于YOLOv7【tiny/l/x】不同系列参数模型开发构建海洋场景下海洋生物检测识别分析系统

前面的博文中&#xff0c;开发实践过海底相关生物检测识别的项目&#xff0c;对于海洋场景下的海洋生物检测则很少有所涉及&#xff0c;这里本文的主要目的就是想要开发构建基于YOLOv7不同系列参数模型的海洋场景下的海洋生物检测识别系统。 前文已有相关实践&#xff0c;感兴…

如何在debian上实现一键恢复操作系统?

在Debian或任何其他Linux发行版上实现一键恢复操作系统&#xff0c;需要创建一个系统镜像或快照&#xff0c;并设置一个简单的方法来从该镜像恢复。以下是创建和恢复系统的基本步骤&#xff1a; 1. 创建系统镜像&#xff1a; 使用像dd&#xff0c;rsync或专门的备份工具&#…

STM32—触摸键

目录 1 、 电路构成及原理图 2 、编写实现代码 3、代码讲解 4、烧录到开发板调试、验证代码 5、检验效果 此笔记基于朗峰 STM32F103 系列全集成开发板的记录。 1 、 电路构成及原理图 触摸键简单的了解就是一次电容的充放电过程。从原理图可以看出&#xff0c;触摸键 …

4.网络游戏逆向分析与漏洞攻防-游戏启动流程漏洞-模拟游戏登陆器启动游戏并且完成注入

内容参考于&#xff1a;易道云信息技术研究院VIP课 上一个内容&#xff1a;游戏启动流程的分析 码云地址&#xff08;master 分支&#xff09;&#xff1a;https://gitee.com/dye_your_fingers/titan 码云版本号&#xff1a;bcf7559184863febdcad819e48aaacad9f25d633 代码下…