element plus:tree强制更新

使用element plus的tree组件,做大屏设计器的图层列表,在左边的tree里和中间的编辑器里都可以右键上下移动图层,但是我遇到一个问题,往编辑器里增加组件,这种较大的变动,tree的渲染可以立马同步更新,但是如果我仅仅是移动图层,tree就没反应了,其实绑定的数据已经发生了变化,数据里元素的顺序变了,查了一圈,目前可行的办法是用v-if来重新渲染tree。

由于只是移动图层的时候才有这个bug,所以只针对这种情况强制更新,免得影响性能。

在store里定义一个布尔型变量updateLayer,只要移动图层,就取反。

给tree加v-if

监听updateLayer,只要发生了改变,就先销毁tree,再重建,需要注意的是,重建要放在nextTick里。

watch: {'designerStore.updateLayer': {handler() {this.flag = false //先销毁组件this.$nextTick(() => {// 销毁结束后,再重建组件this.flag = true})},deep: true}},

 

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

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

相关文章

活动报名 | 如何进行全增量一体的异构数据库实时同步

伴随着新技术的不断涌现,市场竞争也在不断开辟新的角斗场——新的业务需求,新的应用设想都在这里迸发。 面对如此日新月异的竞争环境,企业的当务之急,是为新应用扎根准备好随时可取、准确一致的高质量数据土壤。在这样的背景下&a…

python基础语法--列表

一、列表的概念 列表(List)是一种有序、可变、允许重复元素的数据结构。列表用于存储一组相关的元素,并且可以根据需要动态地进行增加、删除、修改和访问。以下是列表的主要特点和操作: 有序性: 列表中的元素是按照它…

ROS 2边学边练(32)-- 初识tf2

前言 在上一篇文章当中我们已经用到了tf2,虽然有点懵,但所幸我们从这篇起将正式开始学习tf2,让它没有秘密可言。 动动手 我们依然是拿小海龟作为案例,简简单单走一遍流程,熟悉一下。 安装例子 安装例子及其依赖项。 …

如何使用 ArcGIS Pro 快速为黑白地图配色

对于某些拍摄时间比较久远的地图,限于当时的技术水平只有黑白的地图,针对这种情况,我们可以通过现在的地图为该地图进行配色,这里为大家讲解一下操作方法,希望能对你有所帮助。 数据来源 教程所使用的数据是从水经微…

Git | 分支管理

Git | 分支管理 文章目录 Git | 分支管理1、理解分支2、创建分支&&切换分支3、合并分支4、删除分支5、合并冲突6、分支管理策略合并分支模式实际工作中分支策略bug分支删除临时分支 1、理解分支 分支就类似分身。 在版本回退中,每次提交Git都会将修改以git…

【记录】Pandoc|Linux安装最新Pandoc

参考:官方文档,https://pandoc.org/installing.html 系统:Ubuntu 注意!Pandoc 不能接受 PDF 作为输入!!!如果是想下载 Pandoc 做 PDF 格式转换请放弃!! Linux 是 amd64 版…

使用PlantUML绘制活动图、泳道图

最近在学PlantUML 太漂亮了 给大家欣赏一下 我也记录一下 startuml |使用前| start :用户打开旅游App; |#LightSkyBlue|使用后| :用户浏览旅游信息; |#AntiqueWhite|登机前| :用户办理登机手续; :系统生成登机牌; |使用前| :用户到达机场; |登机前| :用户通过安检; |#Light…

14.接口自动化测试-造数据

1.测试造数据 工作场景: 需要造一批测试数据 解决方案: (1)使用字符串拼接 135XXXXX (2)使用第三方库去做 faker 安装: pip install Faker 若安装不成功,可能是需要清下缓存&a…

【R语言简介】

🌈个人主页: 程序员不想敲代码啊 🏆CSDN优质创作者,CSDN实力新星,CSDN博客专家 👍点赞⭐评论⭐收藏 🤝希望本文对您有所裨益,如有不足之处,欢迎在评论区提出指正,让我们共…

VScode配置MySQL

1、进入官网,下载MySQL 地址:dev.mysql.com/downloads/mysql/ ZIP方式下载,选择本地的路径进行解压。 2、配置环境变量 形如下方的路径: D:\software\Mysql\mysql-8.3.0-winx64\bin 即是解压位置后文件夹下的bin文件路径 3、初…

Manim - Python 绘画引擎

文章目录 关于 Manim安装manim 有两个版本要求直接使用 pip使用源码安装 使用 manimManual 关于 Manim Manim : Mathematical Animation,是由 Grant Sanderson 开发,是一个用于精确编程动画的引擎,专为创建解释性数学视频而设计。 github :…

.netcore+vue新生分班系统的设计与实现

.netcore vue新生分班系统的设计与实现说明文档 运行前附加数据库.mdf(或sql生成数据库) 主要技术: 基于.net core架构和mysql数据库vue 东北石油大学新生分班系统的设计与实现 功能模块: 登录 注册学生 忘记密码 系统首顶 个…