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

三、控制台打印信息