Element-ui中关闭dialog时隐藏组件并销毁_太阳晒屁股了的博客-程序员ITS301_销毁dialog

技术标签: element-ui  Vue  懒加载树  

背景:今天在写Vue时遇到一个element-ui中懒加载树的问题, 由于tree的展示是在模态框中, 所以默认显示模态框加载lazyLoad方法没问额!但是关闭后你再次打开模块框时不会再去执行lazyLoad方法了, 这就有问题了。

<el-dialog
    title="添加"
    :visible.sync="addDialogVisible"
>
  <el-tree
    :props="props"
    :load="lazyLoad"
    lazy
    show-checkbox>
  </el-tree>
</el-dialog>

其实你已经想到了,就是隐藏dialog的时候要销毁这个dialog。 参看官网后发现给dialog加v-if,在关闭dialog的时候将v-if设置为false这样el-tree会直接将其从DOM结构中抹除,到此问题解决。

附上官网地址:https://cn.vuejs.org/v2/guide/conditional.html#v-if-vs-v-show

v-if vs v-show

v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。

相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。

一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。

修改后代码:

<el-dialog
    title="新增帮助资料"
    :visible.sync="addDialogVisible"
    v-if="addDialogVisible"
>
  <el-tree
    :props="props"
    :load="lazyLoad"
    lazy
    show-checkbox>
  </el-tree>
</el-dialog>

来来来给我一分钱,我将给你更多优质博文~

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_25135655/article/details/94400290

智能推荐

MasterCAM编程软件 2020版有哪些改进?_Trouvaille_a的博客-程序员ITS301_编程软件mastercam

MasterCAM编程软件 2020版有哪些改进?MasterCAM是2D编程之王,现在已是2020版别了,会用MasterCAM软件,开一个工厂编程绝对不成问题,加工产品更是挥洒自如。mastercam 2020更新分为General Enhancements (通用部分,集中于软件主页页面选项中)Design Enhancements (规划部分,集中于软件绘图/实体/曲面等部分)Mill Enhancements (铣削部分)Lathe Enhancements (车削部分)Mill-Tu

Visual C++编程控制鼠标_carl2380的博客-程序员ITS301_编译鼠标控制软件

<br />http://it.china-b.com/cxsj/vc/20090821/153197_1.html<br /> <br />鼠标是现在计算机的标准配置,很多软件都有控制鼠标的功能,比如,有的保密软件可以使鼠标移动限制在一定范围以内,有的可以模拟鼠标的,有的可以使鼠标自己移动。要实现以上的功能,必须使用Windows的API函数。 <br />我们以下面的程序例子,来说明如何控制鼠标。我们使用Visual C++6.0来写这个程序。打开Visual C++6.0,使用MFC AppWizar

红帽linux iso镜像,红帽 Red Hat Linux相关产品iso镜像下载_weixin_39603505的博客-程序员ITS301

为了方便搜索,特把红帽EL 5、EL6 的各版本整理一下,共享出来。RedHat Enterprise Server 6.7 for i386 Boot Disk:rhel-server-6.7-i386-boot.isoSHA-256 Checksum:798d24aa6a2805aebd46617c25bf769b97c47afac73c8674b5e32d4428c91130链接:( 密码:...

用Portable.BouncyCastle来进行加解密的代码demo_weixin_30482383的博客-程序员ITS301

前言这里对之前对接的公司中的代码demo做一个总结,原本为清一色的java,哈哈。这里都转成C#。用到的库是Portable.BouncyCastle。官网。之前也是准备用.net core 内置的类,方法,但实际在用的时候比如因为desKey并不是特定长度的,导致抛了一些异常,于是就改用了这个库。这个库中有如下这么一段的介绍:The lightweight API works with e...

利用unity和steamVR完成场景漫游(五) 学习VRTK中简单案例_carotadream的博客-程序员ITS301

DEMO 1  查询硬件手柄头显在VRTK插件 的第一个demo   001_CameraRig_VR_PlayArea 案例 这个demo 显示的功能:  按下任一手柄上的按键,便载入下一个场景 找到demo场景中##Scene Changer## 游戏物体,打开附加的scene changer脚本里面有两个核心的类,以及几个重要的API VRTK_DeviceFinder类 : 用于在场景中寻...

批量裁剪(crop)&重置图像分辨率(resize)【Python】==》skimage_Ella_le的博客-程序员ITS301

from skimage import io,transformimport numpy as np#from resizeimage import resizeimagedef imgfunc(f): rgb=io.imread(f) #依次读取rgb图片 ROI=rgb[357:2375,150:2150] #根据自己的剪裁要求设置 ##...

随便推点

MySQL用户帐户管理_anzhen0429的博客-程序员ITS301

6.3.1用户名和密码MySQL将帐户存储在系统数据库的user表中 mysql。根据用户名和用户可以从其连接到服务器的客户端主机或主机来定义帐户该帐户也可能有一个密码。MySQL支持身份验证插件,因此帐户可能会使用一些外部身份验证方法进行身份验证MySQL用户名长达32个字符(MySQL 5.7.8之前为16个字符)。操作系统用户名可能具有不同的最大长度要验证使用MySQL本

win7配置安装tensorflow_古路的博客-程序员ITS301

win7配置安装tensorflow(非GPU版)引言1、配置安装[Anaconda3-4.2.0](https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/)2、通过Anaconda配置相应版本Python3、配置安装TensorFlow引言windows7 + Anaconda3-4.2.0-Windows-x86_64 + Py...

Spring整合Struts2(一)_carson0408的博客-程序员ITS301_spring整合struts2

之前已经对Spring以及Struts的基础知识、配置以及单独开发都做了讲述,本文则对Spring整合Struts2开发进行讲述分析。之前讲的直接使用struts2进行开发web应用,存在一个问题,就是struts2作为核心控制器,还需要进行业务逻辑组件的管理,会使性能降低,理想状态是控制器不参与业务逻辑组件的实现,只是负责使用业务逻辑组件,这就是设计模式中的工厂模式。而使用Spring整合str

python随机数据增强_Python - 语义分割数据增强实现_weixin_39682673的博客-程序员ITS301

from __future__ import print_functionimport cv2import numpy as npdef resize(img, grt=None, mode=ModelPhase.TRAIN):"""改变图像及标签图像尺寸AUG.AUG_METHOD为unpadding,所有模式均直接resize到AUG.FIX_RESIZE_SIZE的尺寸AUG.AUG_MET...

05 图像检索领域经典文章及其开源项目_huifengdong的博客-程序员ITS301

目录一、文章1.1 深度学习如何有效的用于图像检索1.2 图像检索:基于内容的图像检索技术1.3 图像检索:再叙ANN Search二、2.12.2 Image-Retrieval-by-Finetuning-CNN2.3 Hashing-for-Image-Retrieval2.4 Keras-Remote-sensing-image-retrieval2.5 content-based-ima...

5G(NR)网络中的SRB定义和类型_唐鸿23的博客-程序员ITS301_5g srb3

SRB( Signaling Radio Bearer)就是无线信令承载;SRBs(Signalling Radio Bearers)是传输RRC和NAS消息的无线承载;根据3GPP TS38.331,5G (NR)的SRB有四种:1.SRB的类型——SRB0用来传输RRC消息,在逻辑信道CCCH上传输——SRB1用来传输RRC消息(也许会包含piggybacked NAS消息),在SRB2承载的建立之前,比SRB2具有更高的优先级。在逻辑信道DCCH上传输.——SRB2用来传输NAS消息...

推荐文章

热门文章

相关标签