sangtian152 / vue3-tree-org Goto Github PK
View Code? Open in Web Editor NEW基于vue3.x + typeScript 实现的组织架构图
License: MIT License
基于vue3.x + typeScript 实现的组织架构图
License: MIT License
放大的时候 拖动速度变快了 缩小的时候拖动速度就很慢了
需要把整个树截图保存下来,请问有没有相关demo
请联系我:wx:15182223008
没有api方法添加删除,对节点进行操作吗?
你好,自定义节点如何拖拽?我这边需要自定义拖拽的行为,用于支持拖拽排序。
目前来说使用自定义节点,拖拽的时候,显示不出那个虚影,然后组件本身的拖拽功能是基于什么实现的?简单看了下当前组件的div上没见有使用draggable="true"。
看到示例都是全局使用,尝试局部使用不能显示
http://at.alicdn.com/t/font_2201426_wnqkpnyga1.css
这会导致electron开发中请求失败,能否改成静态资源方式
Cannot find module '../../../utils/types' or its corresponding type declarations.
正常鼠标往上是放大 往下是缩小 反了
最近做个项目,想在点击加号展开的时候,先弹框出个列表,选择以后再加载子层级的数据,大家有没有办法,怎么解决呢?
https://sangtian152.github.io/vue3-tree-org/guide/#%E4%BB%8B%E7%BB%8D
自定义节点时,取不到完整节点数据
建议添加支持配置自定义连线的样式
data如何自定义数据(附加数据)
自定义节点插槽node传过来的数据有两层,其中$$data中的数据才是我想要的。
附上我的原始数据
{
"orgType": 1,
"priority": 99,
"id": 1,
"logo": "https://bitpig-column.oss-cn-hangzhou.aliyuncs.com/AA12/132366555236270081.jpg",
"name": "集团有限公司",
"label":"集团有限公司",
"shortName": "集团",
"parentName": "集团有限公司",
"director": "陆鑫",
"children": [
{
"orgType": 1,
"priority": 98,
"id": 2,
"pid": 1,
"logo": "https://bitpig-column.oss-cn-hangzhou.aliyuncs.com/AA12/132366555236270081.jpg",
"name": "信息技术中心",
"label": "信息技术中心",
"shortName": "信息技术",
"parentName": "集团有限公司",
"director": "路逸",
"children": [
{
"priority": 5,
"id": 7,
"pid": 2,
"logo": "http://url",
"name": "产品研发部",
"label" : "产品研发部",
"parentName": "信息技术中心",
"director": "陆鑫",
"children": [
{
"priority": 5,
"id": 7,
"pid": 7,
"logo": "http://url",
"name": "后端",
"label" : "后端",
"parentName": "信息技术中心",
"director": "陆鑫",
}
]
},
}
然后通过自定义节点插槽的代码
<vue3-tree-org
:data="data"
:collapsable="collapsable"
:label-style="style"
:clone-node-drag="cloneNodeDrag"
:horizontal="horizontal"
:disabled="disabled"
:scalable="scalable"
expand="true"
@on-node-click="nodeClick"
@on-contextmenu="onMenus"
>
<template #default="{ node }" >
<div class="flex tree-org-node__text node-label">
<img :src="node.logo" alt="" class="custom-content w-6 h-6">
<div>{{node.label}}</div>
<div>{{ node.$$data.logo }}</div>
</div>
</template>
</vue3-tree-org>
以下是插槽node的数据,有两层。其中$$data中的才是我想要的数据,该怎么解决?
{
"id":1,
"label":"集团有限公司",
"expand":false,
"children":Array[5],
"$$level":0,
"$$data":{
"orgType":1,
"priority":99,
"id":1,
"logo":"https://bitpig-column.oss-cn-hangzhou.aliyuncs.com/AA12/132366555236270081.jpg",
"name":"集团有限公司",
"label":"集团有限公司",
"shortName":"集团",
"parentName":"集团有限公司",
"director":"陆鑫",
"children":Array[5]
},
"$$focused":false,
"$$root":true
}
而通过node.$$data.logo 获取这个字段的时候会报错,可能是因为还没生成。
初始化和还原的的时候能居中吗大佬?
当一个节点非常多的树结构进行竖直显示的时候,我怎样能够让它能够通过滚动条进行浏览而不是通过拖动的方式?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.