VUE插件 - relation-graph 【新增下级节点】
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
新增下级节点
这个是在有关系图谱的基础上新加的一个衍生功能
下面开始正题
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 个月前
更多推荐
已为社区贡献3条内容
所有评论(0)