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

本文介绍: 在 Vue 中，每个组件都有一个唯一的 key 属性。当组件的 k e y 属性发生改变时，Vue 会视为这是一个新的组件，而不是复用之前的组件。这样就会触发组件的重新渲染，从而实现页面的刷新。问题背景：侧导航页面都是子组件,建模页面的画布无法显示。解决思路：点击建模菜单时再次加载对应组件。

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

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

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

在这里插入图片描述

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

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

&lt;el-tabs v-model="activeName" type="border-card" tab-position="left"&gt;
   &lt;el-tab-pane label="基础信息" name="first" :disabled="true" /&gt;
   ...
   &lt;el-tab-pane label="..建模" name="seventh"&gt;
      &lt;ProcessModeling ref="jianmo" :key="refreshKey" /&gt;
   &lt;/el-tab-pane&gt;
   ...
</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>