新增下级节点

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

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)
        }) 
    } 
}
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐