Git Product home page Git Product logo

zm-tree-org's Introduction

zm-tree-org

OSCS Status

介绍

一个简易版组织架构图,组件依赖于vue-org-tree, 在此基础上将部分源代码进行优化修改。可鼠标拖动拖拽,以及鼠标滚轮缩放,并且支持拖动节点改变树结构。

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

vue3.x版本请访问 vue3-tree-org

安装

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

引入

import Vue from 'vue';
import ZmTreeOrg from 'zm-tree-org';
import "zm-tree-org/lib/zm-tree-org.css";

Vue.use(ZmTreeOrg);

使用示例

示例代码

最新版本

NPM version

文档

说明文档.

zm-tree-org's People

Contributors

sangtian152 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

zm-tree-org's Issues

如何动态赋值data

你好,我是初学者。
我想在界面调用后台接口获取数据后,使用zm-tree-org动态展示架构图。
当前获取数据后使用“this.treeData = res.data.result;” 无法展示架构图。
result结构示例:
{ "id": "19480920", "lable": "19480920", "children": [ ] }

改下样式

.tree-org-node__children{ width: 100%; }
这个换成100%,
在父级有100px,子级只有10px时,关系线错乱,( horizontal=false )

缩放问题

1,如何才能以鼠标为中心点
2,图表默认加载时,如何文本设置了white-space: nowrap; 会导致图表无法全部展示
image
我想要图表默认情况下,展示全部,如下图
image

连接线错位了

在子节点只有一个的时候,子节点和父节点的连接线错位了

使用报错

zm-tree-org.common文件 7043行 var childNodes = this.menuData[children]||[];改一下 不然修改报错

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.