图页分层功能_antv g6 两个graphtree 每一层都对齐-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43326625/article/details/104683757

功能细分

1.双击打开图页+点击tabs切换图页+关闭tabs保存使用
2.图元和图页之间从属关系设计（图元id，sonpage_id，图页：id，fatherpage_id）
解答思考：为什么是【父图元】找【儿子页】？BUT NOT【儿子页】找【父图元】
思路：图元太多，浪费搜索时间。而图页少，相对搜索容易
3.图元右键菜单（下一页），图页右键菜单（上一页）

解读思路

一，ztree双击打开elementui图页：
工具：g6（graph部分）+elementui（tabs部分）
参照：旧项目div（#t_map）下属的div（#Div）下属的div（#myholder）
设计：
1、ztree双击：elementui的tabs打开/添加后打开
双击–》若不存在tabs，添加tabs、、若存在tabs，让指定tabs为选中状态（选中函数）。（通过title指定）
2

新知识

vue中key的作用：为了强制替换，而不是修改。
出现invalid container报错：
https://www.cnblogs.com/threepigs/p/10572114.html

遇到问题

1，显示vue没定义
解决：对某个vue对象，data统一写在对象定义处（如surface.js）
2,define_tree.js中的数据无法传入graph.js(可能是所有其他js) 数据传输
解决：去掉type=‘module’原因：需要export和import
2,如何将tabs和ztree关联
解决：tabs的title = 树的text

var title = node.text;

解决：

var id = node.id;

var content = document.createElement("div");

content.id = id;

心得

1,模板翻译：

</head>
<body>
<div id="app">
  <p>{{ message }}</p>
</div>

<script>
new Vue({
  el: '#app',//对对象app来说，message相当于data中的message
  data: {
    message: 'Hello Vue.js!'
  }
})
</script>