(Ant X6)子组件里的流程图画布无法显示

(Ant X6)子组件里的流程图画布无法显示


问题背景:侧导航页面都是子组件,建模页面的画布无法显示


解决前:
在这里插入图片描述
解决后:

在这里插入图片描述


解决思路:点击建模菜单时再次加载对应组件

在 Vue 中,每个组件都有一个唯一的 key 属性。当组件的 key 属性发生改变时,Vue 会视为这是一个新的组件,而不是复用之前的组件。这样就会触发组件的重新渲染,从而实现页面的刷新。

<el-tabs v-model="activeName" type="border-card" tab-position="left"><el-tab-pane label="基础信息" name="first" :disabled="true" />...<el-tab-pane label="..建模" name="seventh"><ProcessModeling ref="jianmo" :key="refreshKey" /></el-tab-pane>...
</el-tabs><script>
...
import ProcessModeling from "./ProcessModeling"; //流程图组件
export default {name: "BasicInformation",components: { ...ProcessModeling, },data() {return {activeName: "second",//默认页面refreshKey: 0,//组件默认的key};},//监听点击菜单watch: {activeName: {deep: true,immediate: true,handler(val) {//重点if (val === "seventh") {this.refreshKey++;//组件的key改变会重新加载组件}},},},mounted() {},methods: {},
};
</script>

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

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

相关文章

vue升级题

不熟悉的&#xff1a; 2&#xff0c; 3.你用过befcoreDetory 吗&#xff1f;清除定时器&#xff0c;第一个和第二个再看一下 实例加载完成是在哪个生命周期--beforecreate 7.父子组件生命周期执行顺序&#xff1f;为什么这么渲染&#xff1f;场景 8.简单描述每个周期具体适…

第二十章总结。。。

20.1线程简介. 20.2创建线程 2.1继承Thread类 Thread 类是java.lang包中的一个类&#xff0c;从这个类中实例化的对象代表线程&#xff0c;程序员启动一个新线程需要建立Thread 实例。Thread类中常用的两个构造方法如下: public Thread():创建一个新的线程对象。 public Thread…

中医诊所/中医馆如何打破发展局限,创新引流获客?

随着社会生活水平不断发展&#xff0c;人们对医疗卫生服务水平的要求也越来越精细化&#xff0c;多样化。中医诊所/中医馆&#xff0c;在与传统服务发展中正在面临着诸多挑战与难题。 传统宣传推广&#xff1a;医疗市场竞争激烈&#xff0c;许多中医诊所、中医馆仍依赖传统的口…

使用Java将properties转为yaml,保证顺序、实测无BUG版本

使用Java将properties转为yaml 一 前言1.1 顺序错乱的原因1.2 遗漏子节点的原因 二、优化措施三、源码 一 前言 浏览了一圈网上的版本&#xff0c;大多存在以下问题&#xff1a; 转换后顺序错乱遗漏子节点 基于此进行了优化&#xff0c;如果只是想直接转换&#xff0c;可直接…

React自定义Hook之useModel hook

一、概述 useModel hook是React Hook中一个自定义的钩子函数&#xff0c;用于管理应用程序中的状态和逻辑。它主要用于组件之间的状态共享和通信。 useModel hook通常包含以下几个步骤&#xff1a; 1.创建模型&#xff1a;定义需要共享的状态和相关的方法&#xff0c;可…

性能测试:系统架构性能优化

今天谈下业务系统性能问题分析诊断和性能优化方面的内容。这篇文章重点还是谈已经上线的业务系统后续出现性能问题后的问题诊断和优化重点。 系统性能问题分析流程 我们首先来分析下如果一个业务系统上线前没有性能问题&#xff0c;而在上线后出现了比较严重的性能问题&#x…

C++ CryptoPP使用AES加解密

Crypto (CryptoPP) 是一个用于密码学和加密的 C 库。它是一个开源项目&#xff0c;提供了大量的密码学算法和功能&#xff0c;包括对称加密、非对称加密、哈希函数、消息认证码 (MAC)、数字签名等。Crypto 的目标是提供高性能和可靠的密码学工具&#xff0c;以满足软件开发中对…

开启虾皮购物新旅程,快速注册买家号

想要在shopee上畅享丰富的购物体验吗&#xff1f;那就让我们一起迈出第一步&#xff0c;注册一个属于你自己的虾皮买家号吧&#xff01; 1. 访问虾皮平台 首先&#xff0c;打开你的浏览器&#xff0c;输入虾皮平台网址&#xff0c;点击注册或登录按钮。这将引导你进入注册界面…

企业微信http协议接口调用,根据手机号搜索联系人

产品说明 一、 hook版本&#xff1a;企业微信hook接口是指将企业微信的功能封装成dll&#xff0c;并提供简易的接口给程序调用。通过hook技术&#xff0c;可以在不修改企业微信客户端源代码的情况下&#xff0c;实现对企业微信客户端的功能进行扩展和定制化。企业微信hook接口…

香港媒体发稿:7个技巧助你走上营销巅峰-华媒舍

营销对于企业来说是非常重要的一环。在如今的竞争激烈的市场环境中&#xff0c;如何让自己的产品或服务更好地被消费者接受和认可&#xff0c;是每家企业都需要思考的问题。在这篇文章中&#xff0c;我们将介绍香港港媒体发稿的七个技巧&#xff0c;帮助你将营销推向一个新的高…

js 页面截图三种解决方案

1.html2canvas npm install html2canvas // 引入html2canvas库 import html2canvas from html2canvas;// 设置定时器&#xff0c;每隔10秒执行一次截图操作 setInterval(async () > {try {// 将网页内容转换为canvas元素const canvas await html2canvas(document.body);/…

Python武器库开发-前端篇之JavaScript基础语法(三十四)

前端篇之JavaScript基础语法(三十四) JavaScript的三种引用方式 JavaScript的三种引用方式分别是&#xff1a; 内部引用&#xff08;内联式&#xff09;&#xff1a;将JavaScript代码嵌入到HTML页面中的<script>标签内部。例如&#xff1a; <script type"tex…

通过lua脚本在redis中处理json数据

在日常开发中&#xff0c;系统都会使用redis作为缓存来加快服务的响应&#xff0c;我们通常会将一个对象数据存储在redis中&#xff0c;对象存储通常有两种方案&#xff1a;一种是存储为hash结构&#xff0c;对象的键是属性名&#xff0c;值为属性值&#xff1b;另一种是序列化…

【自动化测试】pytest 用例执行中print日志实时输出

author: jwensh date: 20231130 pycharm 中 pytest 用例执行中 print 日志 standout 实时命令行输出 使用场景 在进行 websocket 接口进行测试的时候&#xff0c;希望有一个 case 是一直执行并接受接口返回的数据 def on_message(ws, message):message json.loads(message)…

NAT网络地址转换

目录 什么是nat nat 实验如何使用SNAT 和 DNAT 实验环境 内网连接外网 1.给网关服务器添加网卡&#xff08;两张网卡&#xff09; 2.查看新添加的网卡名 编辑网卡配置 3.开启路由转发 4.打开内网服务器 5.切换到外网服务器&#xff08;192.168.17.30&#xff0…

JavaScript添加快捷键、取消浏览器默认的快捷操作、js查看键盘按钮keycode值

document.addEventListener("keydown",function (event) {// 如果不知道按键对应的数字&#xff08;keyCode&#xff09;是多少可以弹出查看一下// alert(event.keyCode)if (event.ctrlKey && event.altKey && event.view["0"] null){if(…

[PTP][1588v2] Follow_Up消息

一、报文格式 0------3--------7--------11--------15--------------------------------31 |TranSpec|MsgType|Reserved1| VerPTP | MsgLength | ----------------|------------------|---------------------------------| | DomainNumber | Res…

ZZULIOJ 2521: 文本修正

2521: 文本修正 题目描述 Chika接到了去检查河南省算法竞赛题面的任务&#xff0c;她发现所有单词"Henan"的首字母都没有大写。她需要去修正文本中的所有错误。换句话说&#xff0c;她需要把所有单词"henan"的首字母从"h"替换为"H"&…

LiteOS学习笔记一

LiteOS笔记一 LiteOS简介(转自官方仓库)学习LiteOS的意义LiteOS代码目录IDE建议 LiteOS简介(转自官方仓库) Huawei LiteOS是华为面向物联网领域开发的一个基于实时内核的轻量级操作系统。本项目属于华为物联网操作系统[Huawei LiteOS]源码&#xff0c;现有基础内核包括不可裁剪…

MedicalTransformer论文解读

论文是一个分割任务&#xff0c;但这里的方法不局限于分割&#xff0c;运用到检测、分类都可以。 论文下载 https://www.yuque.com/yuqueyonghupjh9oc/ovceh4/onilw42ux6e9n1ne?singleDoc# 《轴注意力机制》 一个问题 为什么transformer一开始都有CNN&#xff1a;降低H、W…