vue3使用AntV X6 (图可视化引擎)历程[二]

通过h函数动态展示自定义节点内容

一、案例效果

二、案例代码

• 父组件. BloodTopology.vue

• h 函数动态渲染内容展示 attrConfig.ts

  import NodeElement from '@/views/featureManage/featureList/topologyToolKit/NodeHtml.vue';
  import { h } from 'vue';
  /**

  • 自定义注册节点配置
    */
    export const registerOption = {
    shape: 'vue-shape',
    width: 100,
    height: 100,
    component: ({ node }: { node: any }) => {
    // 将 node 数据传递给 NodeElement 组件
    return h(NodeElement, { nodeElementItem: node });
    },
    };

• 自定义节点内容展示 NodeHtml.vue

三、控制台打印信息