vue-orgchart: 可编辑，可导出JSON的树形组织图

最新推荐文章于 2024-05-23 09:49:05 发布
最新推荐文章于 2024-05-23 09:49:05 发布
阅读量1.9k 收藏 1
点赞数
文章标签： javascript json ui ViewUI
原文链接：https://juejin.im/post/5a2dded1f265da4304068efe
版权

一个对OrgChart.js封装并修改的Vue2.x组件

调研

最近公司有个需求，做一个可编辑的树形组织图。我第一个想到的是ECharts，可当时并没有（最近一个版本出了树图也不是组织图）；然后想到了AntV G6（上手难度有点大也不是组织图）；GoJS（LICENSE问题）；最后找到了OrgChart，本是jQuery插件且有时间沉淀，并有二次开发的ES6版本，就是它了。

感谢

  • 首先感谢dabeng的Orgchart.js -- OrgChart.js
  • 如果你想用OrgChart.js的Vue封装，可以直接用 我的项目

功能

  • JSON格式导入导出树形关系图
  • 支持树形关系图导出图片
  • 可拖拉树形关系图
  • 可编辑树形关系图

...

预览

项目地址：github.com/spiritree/v…

文档地址：spiritree.github.io/vue-orgchar…

weixin_34192993
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue3使用echarts树图（tree）
Mr Dear的博客
04-19 4827
Vue3+TS使用echarts树图
vue 使用orgChart，实现简单树状结构
痞子宝
12-08 5902
一、安装 npm install vue-orgchart -S 在min.js中 import 'vue-orgchart/dist/style.min.css' 二、模板 <template> <div> <vo-basic :data="chartData"></vo-basic> </div> </template> <script> import { VoBasic } from 'vue-
探索高效数据可视化：Vue Tree Chart & Canvas Tree Chart
gitblog_00098的博客
05-23 388
探索高效数据可视化：Vue Tree Chart & Canvas Tree Chart 项目地址:https://gitcode.com/ssthouse/tree-chart 在这快速发展的数字化时代，数据可视化成为理解和解析复杂信息的关键工具。今天，我们向您推荐一个强大的开源项目——Vue Tree Chart，它不仅提供了一种在Vue2和Vue3环境中构建美观树状图的方法，而且还集...
使用vue-orgchart库来创建组织架构图
terence的博客
06-05 1092
在这篇博客中，将详细介绍如何构建一个使用Vue.js和vue-orgchart的组织架构图Demo。Vue.js是一种构建用户界面的JavaScript框架，而vue-orgchart是一个基于Vue的组织结构图组件。本Demo将展示如何使用这两种技术来创建一个展示组织架构的可视化工具。
vue-org-chart:管理和发布您的交互式组织结构图（orgchart），100％免费，无需安装
05-13
vueOrgChart 组织结构图：无需网络服务器和数据库即可生成和发布orgchart的完整解决方案（c）Michael Hoogkamer 这是在线 有关更多信息，请参见 您要显示（敏捷）团队而不是组织架构图吗？ 尝试： 开源。 构建设置 仅当您要构建/更改自己的版本时才需要。 如果您想不加修改地使用它，请打开\ doc \ index.html。 另请参见\ doc \ config.js。 有关更多信息，请参见 用于开发的config.js，data.js和photos文件夹位于\ static文件夹中 # install dependencies $ npm install # serve with hot reload at localhost:3000 $ npm run dev # build for production and launch server $ np
Electron + Vue跨平台应用（十）可视化（一）
yi_master的博客
04-23 2607
Electron + Vue + Vscode构建跨平台应用（一）知识点补充 Electron + Vue + Vscode构建跨平台应用（二）Electron + Vue环境搭建 Electron + Vue + Vscode构建跨平台应用（三）利用webpack搭建vue项目 Electron + Vue + Vscode构建跨平台应用（四）利用Electron-Vue构建Vue应用详解 El...
Vue.js中的JSON数据可视化利器: Vue-Json-Tree-View
gitblog_00011的博客
04-18 756
Vue.js中的JSON数据可视化利器: Vue-Json-Tree-View 项目地址:https://gitcode.com/fitzhavey/vue-json-tree-view 在前端开发中，处理和展示JSON数据是一项常见的任务，尤其是在调试、API接口交互或者数据展示时。Vue-Json-Tree-View是一个优秀的Vue组件，它能够优雅地将复杂的JSON数据以可读性强的树形结构显...
基于vue-orgchart库来创建组织架构图demo源码.zip
06-08
基于vue-orgchart库来创建组织架构图demo源码： 1. 支持导出png或pdf 2. 支持平移拖动和缩放 使用依赖： 1. vue.js：Vue.js的核心库。 2. vue-orgchart.min.js：vue-orgchart库的核心文件，用于生成组织架构图。 3....
vue-flowchart:vue原理图
05-08
ÿ ÿ构建设置# install dependenciesnpm install# serve with hot reload at localhost:8080npm run dev# build for production with minificationnpm run build# build for production and view the bundle ...
vue-orgchart库来创建组织架构图demo源码，支持导出png或pdf，支持平移拖动和缩放.zip
最新发布
05-24
vue-orgchart库来创建组织架构图demo源码，支持导出png或pdf，支持平移拖动和缩放 使用依赖： 1. vue.js：Vue.js的核心库。 2. vue-orgchart.min.js：vue-orgchart库的核心文件，用于生成组织架构图。 3. ...
vue-tree-chart:由D3.js支持的使用Canvas和Svg的灵活树形图
05-01
安装npm模块npm install @ssthouse/vue-tree-chart2.注册vue-tree组件import VueTree from '@ssthouse/vue-tree-chart'import Vue from 'vue'Vue . component ( 'vue-tree' , VueTree ) 3.使用组件3.1基本用法见代码...
vue自定义树状结构图的实现方法
01-18
vue 实现自定义树状结构图 可动态添加、删除 可整体拖拽 如需内容也为动态，把组件内容使用input、select等组件替换 数据结构 treeData: [{ name: '1', child: [ { name: '2', child: [{ name: '1' }, { name: '2' }] }, { name: '1', child: [{ name: '1' }, { name: '2' }] } ] }] 思路： 1、先写好一个公共的组件TreeItem 2、加上条件判断 3、然后递归调用自身组件
VUE 实现树形结构
10-08
vue 树形结构 添加删除节点 返回ID 可同步到服务器 treelist组件
orgchart 组织架构图 demo 实例
11-01
orgchart 组织架构图 demo 实例
json可视化树
IT界中的一枝梅的博客
09-14 1870
1、概要 近期项目需要集成第三方webservice服务，前端界面需要将第三方请求json，返回json的可视化展示。 2、效果 借用第三方插件展示 vue-json-viewer 利用Reflect递归查找赋值 3、数据 请求数据 {"type":"object","properties":{"header":{"type":"object","properties":{"AuthHeader":{"type":"object","properties":{"User":{"description":
vue根据json数据生成流程图
weixin_43371136的博客
10-13 3440
根据json数据生成流程图
【Vue中使用JsonView来展示Json树的实例代码】
u012632105的博客
07-28 220
Vue中使用JsonView来展示Json树的实例代码
vue部门结构图_基于 Vue 实现动态组织结构图
weixin_39634022的博客
12-21 1639
基于 Vue 实现动态组织结构图最近一个项目里有个前端绘制家谱图的需求, 大概是下面这个样子:点击节点会弹出操作菜单, 实现增删改查等操作, 查阅网上资料发现, 现有案例基本都是基于 orgchart 这个 jQuery 插件实现的, 我们的项目是基于 vue 的, 不希望因为这个功能引入 jQuery, 所以就基于 Vue 实现了一个简易版的树形图 / 组织结构图组件: Vue-Tree-Cha...
vue部门结构图_Vue组织架构图组件
weixin_39901077的博客
12-21 4015
vue-tree-chart:deciduous_tree: Vue2树形图组件安装npm i vue-tree-chart --save使用in template:in script:import TreeChart from "vue-tree-chart";export default {components: {TreeChart},data() {return {treeData: {...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值