VUE插件 - relation-graph 【新增下级节点】_relation-graph 添加节点

新增下级节点

这个是在有关系图谱的基础上新加的一个衍生功能
1

relation-graph 人员关系图谱

下面开始正题

1.配置节点展开/关闭按钮

defaultExpandHolderPosition：right,
1

2.展开/关闭按钮点击事件

:on-node-expand="onNodeExpand"
1

下面代码是 点击按钮后生成下级节点和节点校验（是否已经动态加载数据）

<setJsonData
  	ref="graphRef" 
   	:on-node-expand="onNodeExpand" 
 />


methods:{
	onNodeExpand(node, e) {
      // // 判断是否已经动态加载数据了
      if (node.data.childrenLoaded) {
        console.log('这个节点的子节点已经加载过了') 
        return
      } 
      // 根据具体的业务需要决定是否需要从后台加载数据
      if (!node.data.isNeedLoadDataFromRemoteServer) {
        console.log('是否需要从后台加载数据') 
        alert('未查到更多相关信息！')
        return
      }
   	  this.loadChildNodesFromRemoteServer(node, (new_data) => {
        this.g_loading = false
        this.$refs.graphRef
          .getInstance()
          .appendJsonData(new_data, (graphInstance) => {
            // 这些写上当图谱初始化完成后需要执行的代码
          })
        this.$refs.graphRef.refresh()
      })
    },
    loadChildNodesFromRemoteServer(node, callback) {
      //这里就是调用的下级节点接口
      let url = '自行添加' 
      _this
        .$http({
          url: url,
          method: 'get',
        })
        .then((result) => { 
          let data = {
            rootId: _this.graphData.rootId,
          }  
          data.nodes.forEach((item) => {
            //这里是确保每个下级节点都有打开关闭按钮
            item.expandHolderPosition = 'right'
            item.expanded = false
          })  
            //callback:当设置完成后的回调函数,可以为空;
          callback(data)
        }) 
    } 
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51