下级节点动态加载

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

relation-graph 人员关系图谱

下面开始正题

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

defaultExpandHolderPosition：right,

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

:on-node-expand="onNodeExpand"

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

<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)
        }) 
    } 
}