草庐IT

【轻松解决el-dialog关闭后数据缓存 没清空】

小蘑菇mmp 2023-06-07 原文

问题描述

在使用el-dialog的时候，关闭弹窗之后，发现数据还是保存在上面，查资料试了那些方法，都不太行，最后发现以下方法，泪目。

解决方案：

方案一、使用this.resetForm("form")重置表单

在控制弹窗的点击事件handleUpdate中使用resetForm方法：

// HTML代码
 <el-button size="mini" type="text" @click="handleUpdate(scope.row)">发放
 </el-button>

// js代码
    methods() {
    
      handleUpdate(row) {
      .../
        //清空弹窗内容
        this.resetForm("form");
      }
    }

方案二、使用Object.assign方法将弹窗数据全部清空/覆盖，再使用clearValidate()清空校验

在控制弹窗的点击事件handleUpdate中使用Object.assign方法：

// HTML代码
 <el-button size="mini" type="text" @click="handleUpdate(scope.row)">发放
 </el-button>

// js代码
    methods() {
    
      handleUpdate(row) {
      .../
        //清空弹窗内容
        this.form = Object.assign({}, {
          num: null,
          behavior: '',
          remark: '',
          type: 2,
        })
      },
      
    }

因为我的弹窗还包含表单校验，所以在表单的取消按钮中，我还得添加清空校验的代码：

// HTML代码
	<el-dialog :visible.sync="openputOut" width="500px" 
		<el-form ref="form" :model="form" :rules="numberRules">
			<el-button @click="cancelForm">取 消</el-button>
		</el-form>
	</el-dialog>
	
// js代码
    cancelForm() {
      this.openputOut = false
      //清空校验
      this.$refs["form"].clearValidate();
    },

这里没有在弹窗点击事件里面使用this.$refs["form"].clearValidate();，而是在取消按钮操作里面。因为如果在那里清空校验的话，要使用nextTick，等dialog已经初始化之后再清空。这样做会出现个现象，会出现闪烁。而不使用nextTick，就不会闪烁，但是在初次点击时，控制台会报错：

    // 2、发放
    handleUpdate(row) {
      this.openputOut = true;
      //清空弹窗内容
      this.$nextTick(() => {
        this.$refs["form"].clearValidate();
      })
      this.form = Object.assign({}, row)
      if (this.form.putOut == null) {
        this.$set(this.form, 'putOut');
      }
    },

最后完成啦~，每次打开都是清空的弹窗：

下面是我尝试过但没生效的方法：

1、使用官方文档提供的 destroy-on-close属性：

<el-dialog :visible.sync="openputOut" width="500px" destroy-on-close>

没有生效，看了组件库的源码，它是通过绑定key值，然后当key属性变化的时候，vue才会对当前组件重新渲染。
2、使用 v-if ：
取值为控制弹窗显示隐藏的值,我们打开弹窗时它就会重新重建,关闭弹窗的话就会销毁。

<el-dialog :visible.sync="openputOut" width="500px" v-if="openputOut">

注意:以上方法只是我试了没用，可能是我项目哪个地方不适用或者有冲突，不代表这些方法没用哈，小伙伴可以去尝试下，以下是我参考方案的地址https://zhuanlan.zhihu.com/p/562462448，希望对你们来说是有用的。

el-dialogdialogspanclasstoken缓存vue.js前端elementui

有关【轻松解决el-dialog关闭后数据缓存 没清空】的更多相关文章

  1. ruby - 解析 RDFa、微数据等的最佳方式是什么，使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2

    我主要使用Ruby来执行此操作，但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式，例如使用这个yaml文件，它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i

  2. ruby - Ruby 有 `Pair` 数据类型吗？ - 2

    有时我需要处理键/值数据。我不喜欢使用数组，因为它们在大小上没有限制(很容易不小心添加超过2个项目，而且您最终需要稍后验证大小)。此外，0和1的索引变成了魔数(MagicNumber)，并且在传达含义方面做得很差(“当我说0时，我的意思是head...”)。散列也不合适，因为可能会不小心添加额外的条目。我写了下面的类来解决这个问题:classPairattr_accessor:head,:taildefinitialize(h,t)@head,@tail=h,tendend它工作得很好并且解决了问题，但我很想知道:Ruby标准库是否已经带有这样一个类？ 最佳

  3. ruby - 如何在 Ubuntu 中清除 Ruby Phusion Passenger 的缓存？ - 2

    我试过重新启动apache，缓存的页面仍然出现，所以一定有一个文件夹在某个地方。我没有“公共(public)/缓存”，那么我还应该查看哪些其他地方？是否有一个URL标志也可以触发此效果？ 最佳答案 您需要触摸一个文件才能清除phusion，例如:touch/webapps/mycook/tmp/restart.txt参见docs 关于ruby-如何在Ubuntu中清除RubyPhusionPassenger的缓存？，我们在StackOverflow上找到一个类似的问题：

  4. ruby-on-rails - Ruby on Rails 计数器缓存错误 - 2

    尝试在我的RoR应用程序中实现计数器缓存列时出现错误Unknownkey(s):counter_cache。我在这个问题中实现了模型关联:Modelassociationquestion这是我的迁移:classAddVideoVotesCountToVideos0Video.reset_column_informationVideo.find(:all).eachdo|p|p.update_attributes:videos_votes_count,p.video_votes.lengthendenddefself.downremove_column:videos,:video_vot

  5. ruby - 如何关闭 ruby​​ gem "Spreadsheet?"中的文件 - 2

    下面的代码在我第一次运行它时就可以正常工作:require'rubygems'require'spreadsheet'book=Spreadsheet.open'/Users/me/myruby/Mywks.xls'sheet=book.worksheet0row=sheet.row(1)putsrow[1]book.write'/Users/me/myruby/Mywks.xls'当我再次运行它时，我会收到更多消息，例如:/Library/Ruby/Gems/1.8/gems/spreadsheet-0.6.5.9/lib/spreadsheet/excel/reader.rb:11

  6. ruby - 我如何添加二进制数据来遏制 POST - 2

    我正在尝试使用Curbgem执行以下POST以解析云curl-XPOST\-H"X-Parse-Application-Id:PARSE_APP_ID"\-H"X-Parse-REST-API-Key:PARSE_API_KEY"\-H"Content-Type:image/jpeg"\--data-binary'@myPicture.jpg'\https://api.parse.com/1/files/pic.jpg用这个:curl=Curl::Easy.new("https://api.parse.com/1/files/lion.jpg")curl.multipart_form_

  7. 世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2

    无论您是想搭建桌面端、WEB端或者移动端APP应用，HOOPSPlatform组件都可以为您提供弹性的3D集成架构，同时，由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台（桌面/WEB/APP，而且某些客户端是“瘦”客户端）快速、方便地将数据接入到3D应用系统的解决方案，并且当访问数据时，在各个平台上的性能和用户体验保持一致，HOOPSPlatform将帮助您完成。利用HOOPSPlatform，您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品，HOOPSSDK包含的技术有：快速且准确的CAD

  8. 屏幕录制为什么没声音？检查这2项，轻松解决 - 2

    相信很多人在录制视频的时候都会遇到各种各样的问题，比如录制的视频没有声音。屏幕录制为什么没声音？今天小编就和大家分享一下如何录制音画同步视频的具体操作方法。如果你有录制的视频没有声音，你可以试试这个方法。 一、检查是否打开电脑系统声音相信很多小伙伴在录制视频后会发现录制的视频没有声音，屏幕录制为什么没声音？如果当时没有打开音频录制，则录制好的视频是没有声音的。因此，建议在录制前进行检查。屏幕上没有声音，很可能是因为你的电脑系统的声音被禁止了。您只需打开电脑系统的声音，即可录制音频和图画同步视频。操作方法：步骤1：点击电脑屏幕右下侧的“小喇叭”图案，在上方的选项中，选择“声音”。 步骤2：在“声

  9. 【高数】用拉格朗日中值定理解决极限问题 - 2

    首先回顾一下拉格朗日定理的内容：函数f(x)是在闭区间[a,b]上连续、开区间(a,b)上可导的函数，那么至少存在一个，使得:通过这个表达式我们可以知道，f(x)是函数的主体，a和b可以看作是主体函数f(x)中所取的两个值。那么可以有，  也就意味着我们可以用来替换 这种替换可以用在求某些多项式差的极限中。方法： 外层函数f(x)是一致的，并且h(x)和g(x)是等价无穷小。此时，利用拉格朗日定理，将原式替换为 ，再进行求解，往往会省去复合函数求极限的很多麻烦。使用要注意：1.要先找到主体函数f(x)，即外层函数必须相同。2.f(x)找到后，复合部分是等价无穷小。3.要满足作差的形式。如果是加

  10. FOHEART H1数据手套驱动Optitrack光学动捕双手运动(Unity3D) - 2

    本教程将在Unity3D中混合Optitrack与数据手套的数据流，在人体运动的基础上，添加双手手指部分的运动。双手手背的角度仍由Optitrack提供，数据手套提供双手手指的角度。 01  客户端软件分别安装MotiveBody与MotionVenus并校准人体与数据手套。MotiveBodyMotionVenus数据手套使用、校准流程参照：https://gitee.com/foheart_1/foheart-h1-data-summary.git02  数据转发打开MotiveBody软件的Streaming，开始向Unity3D广播数据；MotionVenus中设置->选项选择Unit

随机推荐