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,一经查实,立即删除!

相关文章

10.docker exec -it /bin/bash报错解决、sh与bash区别

报错 进入容器时&#xff0c;报如下错误 dockeruserdell-PowerEdge-R740:~$ docker exec -it daf2 /bin/bash OCI runtime exec failed: exec failed: unable to start container process: exec: "/bin/bash": stat /bin/bash: no such file or directory: unknown…

常用的Web应用程序的自动测试工具有哪些

在Web应用程序的自动化测试领域&#xff0c;有许多流行的工具可供选择。以下是一些常用的Web自动化测试工具&#xff1a; 1. Selenium - Selenium是最流行的开源Web应用程序自动化测试套件之一。 - 它支持多种编程语言&#xff0c;如Java、C#、Python、Ruby等。 …

Python——multiprocessing报错:TypeError: cannot pickle ‘_thread.lock‘ object

多进程报错 Traceback (most recent call last):File "C:\Users\miaochangbin\PycharmProjects\eduCrawler\main.py", line 138, in <module>p.start()File "D:\Program Files\python\lib\multiprocessing\process.py", line 121, in startself._po…

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…

下载图片到本地,多个图片压缩后下载到本地

单个图片的下载&#xff1a; 第一种 async downLoadImage() {let response await fetch(https://img-home.csdnimg.cn/images/20231127111739.png);let data await response.blob();let url window.URL.createObjectURL(data);let link document.createElement(a);link.hr…

01 Linux简介

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

Json的简介与基本使用

JSON&#xff08;JavaScript Object Notation&#xff09;是一种轻量级的数据交换格式&#xff0c;易于人阅读和编写&#xff0c;同时也易于机器解析和生成。它基于JavaScript编程语言的一个子集&#xff0c;但JSON是独立于语言的文本格式&#xff0c;代码中可以使用各种语言来…

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

智能运维服务通常包含哪些关键组成部分&#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…

boolean在Java中占几个字节?(企业真题)

boolean 占几个字节 编译时不谈占几个字节。 但是JVM在给boolean类型分配内存空间时&#xff0c;boolean类型的变量占据一个槽位(slot(狭槽、窄口、扁口)&#xff0c;等于4个字节)。 细节&#xff1a;true:1 false:0 拓展&#xff1a;在内存中&#xff0c;byte\short\char\boo…

express静态资源访问错误 xxx.js was blocked due to MIME type (“text/html“)

归根结底原因是没有静态资源xxx.js的访问权限 如何在express中给静态资源添加访问权限&#xff0c;我在express js中添加以下语句解决了该问题&#xff1a; app.use(express.static(public)); 此时访问public文件夹中的xxx.js文件时&#xff0c;只需要使用路径 http://127.0…

备战蓝桥杯 Day9(背包dp)

01背包问题 1267&#xff1a;【例9.11】01背包问题 【题目描述】 一个旅行者有一个最多能装 M&#xfffd; 公斤的背包&#xff0c;现在有 n&#xfffd; 件物品&#xff0c;它们的重量分别是W1&#xff0c;W2&#xff0c;...,Wn&#xfffd;1&#xff0c;&#xfffd;2&#…