当前位置:   article > 正文

VUE插件 - relation-graph 【新增下级节点】_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
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/喵喵爱编程/article/detail/904317
推荐阅读
相关标签
  

闽ICP备14008679号