AntV X6结合Vue组件渲染节点，并与节点组件进行双向的数据交互

最新推荐文章于 2025-03-12 17:39:29 发布

南七小僧

最新推荐文章于 2025-03-12 17:39:29 发布

阅读量4.1k

点赞数 5

文章标签： vue.js 前端 javascript

我是南七小僧，邮箱：xkk9866@yeah.net ，C9博士，前百度搜索AI平台产品负责人，欢迎交流思想碰撞。

本文链接：https://blog.csdn.net/qq_25439417/article/details/130908672

版权

文章介绍了在Vue2.0+Element-ui项目中，如何利用AntVX6库和Vue组件来注册并渲染自定义流程图节点。通过安装AntV的相关依赖，然后在父组件中注册自定义节点，使用render函数创建并监听子组件事件。子组件则通过注入的方式获取节点数据，并能触发事件传递数据回父组件。文中还提到了数据交互的其他可能性，如使用Vuex。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目使用 Vue2.0 + Element-ui 框架，在开发流程功能时自定义节点，为实现稍复杂的样式以及操作交互，使用 markup + attrs的方式的话，比较麻烦，且难以结合使用 Element-ui的交互组件，因此换成结合 Vue组件渲染方式注册自定义节点
（官方文档相对简单了点，老报错，搞了老半天，嘤嘤嘤）

安装依赖

npm install @antv/x6 --save
npm install @antv/x6-vue-shape --save
npm install @vue/composition-api --save

流程组件（父组件）

<script>
import { Graph } from '@antv/x6'
import { register } from '@antv/x6-vue-shape'
import FlowNode from './components/FlowNode'
    
export default {
methods: {
// 注册自定义节点
registerCustomNode() {
register({
  shape: 'flow-node',
  width: 200,
  height: 200,
  component: {
  // 使用 render函数来创建组件
    render: h => h(FlowNode, {
      on: {
      // 监听 FlowNode组件触发的事件，获取传递出来的数据
        myEvent: (data) => {
          this.handleMyEvent(data)
        }
      }
    })
  }
})
},
handleMyEvent(data) {
...
}
}
}
</script>

节点组件（子组件）

/* FlowNode组件 */
<script>    
export default {
name: 'FlowNode',
// 在节点组件中通过 inject 配置来获取 node 和 graph
  inject: ['getNode'],
  data () {
    return {
      curNode: null,
      nodeData: null
    }
  },
  mounted () {
    this.curNode = this.getNode()
    this.nodeData = this.curNode?.data ?? {}
    // 外部更新节点数据时，可监听 data的 change事件来获取
    /* this.curNode.on('change:data', ({ current }) => {
      this.nodeData = current.data
    }) */
  },
methods: {
onMyEvent(node) {
// 节点组件中触发事件，传递数据
this.$emit('myEvent', 'data from FlowNode')
}
}
}
</script>

数据交互

以上是我自己想办法写的一种数据交互方式，相当于是【节点组件】通过 inject、'change:data'的方式获取【流程组件】中赋予节点的数据，通过 $emit 将数据传递给【流程组件】，【流程组件】在注册节点的时候使用 render函数来创建组件，并监听【节点组件】中的事件。
（还有其他数据交互的方式，比如通过 Vuex，根据实际情况可以尝试。）