sangtian152 / vue3-tree-org Goto Github PK

View Code? Open in Web Editor NEW

117.0 2.0 15.0 7.92 MB

基于vue3.x + typeScript 实现的组织架构图

License: MIT License

JavaScript 73.05% HTML 5.58% Vue 2.42% TypeScript 13.51% SCSS 1.59% CSS 3.85%

vue3-tree-org's Introduction

vue3-tree-org

介绍

一个基于vue3.x的简易版组织架构图，vue2.x版本请访问zm-tree-org

架构图支持拖拽和通过鼠标滚轮缩放
支持新增/删除节点
支持编辑节点名称
支持拖动节点改变树结构
支持自定义右键菜单
支持slot自定义节点渲染内容
支持slot自定义展开按钮渲染内容

安装

npm install vue3-tree-org --save
# or 
yarn add vue3-tree-org

引入

import { createApp } from 'vue'
import vue3TreeOrg from 'vue3-tree-org';
import "vue3-tree-org/lib/vue3-tree-org.css";

const app = createApp(App)

app.use(vue3TreeOrg)
app.mount('#app')

使用示例

示例代码

文档

说明文档.

友情链接

virtual-tree虚拟化树形控件，致力于解决数据量过大导致页面卡顿甚至崩溃问题
watermark图片加水印，支持文字水印、图片水印，支持多行
html2pdf将html生成pdf，依赖html2canvas和jspdf
zm-sign一个简易签名组件，基于vue和canvas

vue3-tree-org's People

Contributors

Stargazers

Watchers

Forkers

jddk anhk fangzhenlin-ll jimboxie fuloliyalansfroya alan-t andychenan jiangqianye yol7anda smallg yaoyaochil logep krmao fathermrsing cheerwhy

vue3-tree-org's Issues

data

data如何自定义数据（附加数据）

外层元素不设置高度vue3-tree-org不显示

能不能请有偿实现一个组织架构的反向显示

请联系我：wx：15182223008

vue3+vite + ts 打包报错

Cannot find module '../../../utils/types' or its corresponding type declarations.

没有方法吗

没有api方法添加删除，对节点进行操作吗？

@on-node-dblclick 双击事件不生效

数据不全

自定义节点时，取不到完整节点数据

自定义节点插槽node传过来的数据有两层

自定义节点插槽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 获取这个字段的时候会报错，可能是因为还没生成。

请问支持滚动条浏览吗？

当一个节点非常多的树结构进行竖直显示的时候，我怎样能够让它能够通过滚动条进行浏览而不是通过拖动的方式？

在不同分辨率下，折叠图标+号未对齐

附图：

如果线条加粗为2px时，会更明显一些

点击节点隐藏兄弟节点

大佬好，

想实现点击某个节点，在该节点的click事件处理中，实现隐藏该节点兄弟节点及兄弟节点的所有子节点，然后再次点击该节点的父节点能够正常打开子级节点。

如下图

点击_金融_节点把_实货_节点全部隐藏，再次点击_业务风险报表_，能正常显示_实货_和_金融_节点

有什么好的建议么

谢谢！

把拖拽的节点拖到拖拽的节点下的子节点节点丢失问题以及pid属性的问题

请问下大佬这种问题该怎么解决

还有一个问题就是这个节点上 pid 这个属性是要自己去生成的吗？生成规则是什么

希望能支持节点连线上显示自定义文案

例如：

放大缩小-反人类设计

正常鼠标往上是放大往下是缩小反了

树状布局横向(TB状态)下，子节点希望可以支持自定义布局

预期行为：

类似ant g6实现子节点右对齐功能

  treeGraph.node(function (node) {
        console.log(node.children);
      return {
        label: node.id,
        labelCfg: {
          offset: 10,
          position: node.children && node.children.length > 0 ? "" : "right"
        }
      };
    });

工具栏里面的title文字可以支持多语言吗，或者使用自定义的文字

引入 ts报错

包打包的时候缺失d.ts文件吧

请问如何截图

需要把整个树截图保存下来，请问有没有相关demo

目前节点支持拖拽更换顺序吗

目前叶子节点支持拖拽更换顺序吗
例如：

我在文档中似乎没看到该功能的实现

展开事件，怎么没有展开，关闭的标识呢？

最近做个项目，想在点击加号展开的时候，先弹框出个列表，选择以后再加载子层级的数据，大家有没有办法，怎么解决呢？

图标库用了阿里的icon链接

http://at.alicdn.com/t/font_2201426_wnqkpnyga1.css

这会导致electron开发中请求失败，能否改成静态资源方式

支持默认偏移量、默认缩放比例吗

节点收起和展开时有没有一个事件哇

数据更新的时候，如何保留展开状态？

能否支持一个画布里面显示多个

大佬，你的说明文档打不开了

https://sangtian152.github.io/vue3-tree-org/guide/#%E4%BB%8B%E7%BB%8D

超出

自定义节点如何拖拽？组件的拖拽功能不是用的h5的api吗？

你好，自定义节点如何拖拽？我这边需要自定义拖拽的行为，用于支持拖拽排序。
目前来说使用自定义节点，拖拽的时候，显示不出那个虚影，然后组件本身的拖拽功能是基于什么实现的？简单看了下当前组件的div上没见有使用draggable="true"。

建议添加支持配置自定义连线的样式

拖动速度问题

放大的时候拖动速度变快了缩小的时候拖动速度就很慢了

大佬支持局部使用吗

看到示例都是全局使用，尝试局部使用不能显示

ts下局部使用组件data为undefined

版本："vue3-tree-org": "^4.2.2",
vue3内使用局部组件

目前改成了这种形式就没有问题
import "vue3-tree-org/lib/vue3-tree-org.css";
import Vue3TreeOrg2 from 'vue3-tree-org';
const Vue3TreeOrg = Vue3TreeOrg2.Vue3TreeOrg;