使用vue2-org-tree 树形图插件

原创 已于 2022-03-16 12:51:29 修改 · 4.4k 阅读 · 19 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端 #vue.js

于 2022-01-20 19:14:55 首次发布
本文介绍了如何在Vue CLI项目中使用vue2-org-tree插件展示架构关系。首先通过npm安装，然后在main.js中引入并注册。注意需要安装less和less-loader来解决编译问题。在组件中，通过<vue2-org-tree>标签并提供数据即可显示树形结构，数据结构包含一个父节点id和children子节点数组。
部署运行你感兴趣的模型镜像

如何使用vue2-org-tree来展示出架构关系，首先在vue-cli项目中npm i vue2-org-tree 插件

在main.js中引用 import Vue2OrgTree from ‘’ vue2-org-tree’’; Vue.use( Vue2OrgTree )

* 必须下载 npm i --save -D less less-loader , 不下载less就会报错，因为vue-org-tree内部就是lang= ‘’less’’ 规则（less-loader版本不能太高，不兼容！）。

 简单分析vue2-org-tree结构，仅vue2-org-tree这一个标签。其他延伸出来的结构都是它内部渲染的结构，如何生成的我们不必深究。只需要知道这些属性即可。

<vue2-org-tree  :data = treeList  /> 这个标签内data数据如上图，仅一个父亲id= 0 ,对象下有个children数组包含了所有子节点。

 

您可能感兴趣的与本文相关的镜像

HunyuanVideo-Foley

HunyuanVideo-Foley

语音合成

HunyuanVideo-Foley是由腾讯混元2025年8月28日宣布开源端到端视频音效生成模型，用户只需输入视频和文字，就能为视频匹配电影级音效

devin_csdn
关注
实现树形结构的插件vue-tree-color及元素放大缩小拖动
boundle_ss的博客
12-14 2869
实现树形结构的插件vue-tree-color及元素放大缩小拖动
tree-transfer-vue3插件（树形数据穿梭框）
Pluto_ssy的博客
11-08 3153
tree-transfer-vue3 是一个基于 VUE 和 element-plus 的树形穿梭框组件，使用前请确认已经引入！此组件功能类似于的组件，但是里面的数据是树形结构！实际上，tree-transfer-vue3 依赖的 element-plus 组件分别是，和最主要的写成！并非是在 element-plus 的穿梭框组件上的扩展，而仅仅是参照了其外观样式和功能。
vuejstree是一个用于Vue20的树形插件
08-10
vue-jstree是一个用于Vue2.0 的树形插件
vue——实现组织架构图(vue-org-tree)——技能提升
热门推荐
yehaocheng520的博客
08-13 3万+
关于组织架构图，效果图如下： 之前我是用jq写过一个组织架构图，文章链接如下：当时是用的jOrgChart jq版本的组织架构图：https://blog.csdn.net/yehaocheng520/article/details/117379214?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162883781016780264023604%2522%252C%2522scm%2522%253A%252220140713.13010
如何快速掌握 Vue2.x 组织架构树组件：vue-org-tree 新手入门指南
最新发布
gitblog_01100的博客
10-23 276
vue-org-tree 是一款基于 Vue2.x 的轻量级组织架构树组件，它能帮助开发者快速构建清晰的层级关系图表，适用于企业组织架构展示、部门管理系统等多种场景。本文将为你揭秘组件的核心功能、安装配置方法及常见问题解决方案，让你轻松上手这个实用的 Vue 组件。 ## ???? 核心功能亮点：为什么选择 vue-org-tree？ vue-org-tree 凭借简洁的 API 和灵活的配置选项...
vue2-org-tree 的使用
qq_31683775的博客
12-04 1008
【代码】vue2-org-tree 的使用。
页面展示组织架构-vue2-org-tree插件使用
JiAyInNnNnN123的博客
06-07 3220
前端展示组织架构
vue-org-tree：基于Vue2.x的简单组织树
02-06
Vue-org-tree 基于Vue2.x的简单组织树形图 用法 NPM # use npm npm i vue2-org-tree # use yarn yarn add vue2-org-tree 导入插件 import Vue from 'vue' import Vue2OrgTree from 'vue2-org-tree' Vue . use ( Vue2OrgTree ) // ... CDN # css < link href =" https://unpkg.com/vue2-org-tree/dist/style.css " > # js < script src ="
vue中树状组织架构插件
weixin_47941995的博客
08-31 4547
vue树状组织架构插件
一款实现树形结构的插件vue-tree-color
NIKKT的博客
04-28 3785
通过以上步骤，我们可以在Vue中使用vue-tree-color组件实现树形结构的展示和交互，并且可以自定义节点图标和颜色。需要注意的是，vue-tree-color还支持更多的配置选项和事件回调函数，可以根据实际情况进行使用和修改。vue-tree-color是一款基于Vue.js的树形组件，支持树形结构的展开/折叠、选中、拖拽等功能，并且可以自定义节点图标和颜色。vue-tree-color支持自定义节点图标和颜色。1.安装vue-tree-color。3.使用vue-tree-color。
vue3.0 树形数据插件
七七的博客
09-30 929
vue 树形插件
vue-tree-list:tree树形结构的Vue组件
05-02
安装插件，然后您就可以全局使用该组件了。 import Vue from 'vue' import VueTreeList from 'vue-tree-list' Vue . use ( VueTreeList ) 或者只是像下面的示例一样在本地注册。 用 npm install vue-tree-list ...
vue项目中使用ztree树形插件.zip
03-10
vue项目中使用ztree树形插件
react-org-tree:on基于react的简单组织树组件
05-01
react-org-tree A simple organization tree component based on react If you are using vue, see Installation # use npm npm i react-org-tree # use yarn yarn add react-org-tree Usage import OrgTree from '...
vue-project-tree vue3 树形结构展示组件
one-ccs 的博客
04-22 2450
vue-project-tree 使用 Vue3 + TS 实现的树形结构展示组件，有拖拽、排序、自定义图标等功能
Vue2-org-tree插件 树形管理 详解
weixin_71854821的博客
12-05 3414
Vue2-org-tree是一个基于Vue.js的组织树组件，用于展示和管理组织结构。它提供了一个简单易用的界面，可以快速构建出具有层级关系的组织结构图。
Vue2使用echarts树图（tree）
Vue Amazing UI（Vue3 + TypeScript + Vite）组件库唯一开发维护者
08-30 7653
Vue2使用echarts树图
vue 树形插件_vue2的树形插件
cuk5239的博客
07-24 3135
vue 树形插件 vue-jstree (vue-jstree) A tree plugin for vue2. vue2的树形插件。 View demo 查看演示 Download Source 下载源 NPM (NPM) npm install vue-jstree ES6 (ES6) import VJstree from 'vue-jstree' ne...
vue使用vue2-org-tree
weixin_42324665的博客
09-11 6494
1.安装 java npm install --save-dev less less-loader npm install --save-dev vue2-org-tree tips:因为需要引入less的样式 所以需要安装less 2.main.js引入 import Vue2OrgTree from 'vue2-org-tree'; Vue.use(Vue2OrgTree) 3.在页面中直接调用 <vue2-org-tree :data="orginList" /> //data
vue2-org-tree的使用
01-07
### 如何使用 `vue2-org-tree` `vue2-org-tree` 是基于 Vue 2.x 的简单组织结构树组件，适用于展示层次化数据。以下是详细的使用教程和示例。 #### 安装 要安装 `vue2-org-tree`，可以使用 npm 或 yarn： 对于 npm 用户，在终端中执行如下命令来安装依赖包[^2]： ```bash npm install vue2-org-tree --save ``` 对于 yarn 用户，则应运行以下命令： ```bash yarn add vue2-org-tree ``` #### 基本用法 引入并注册该插件之后就可以在模板里边使用 `<org-tree>` 组件了。下面是一个简单的例子，展示了如何配置基本属性以及传递节点列表给此组件。 首先，在 JavaScript 文件中导入库，并将其作为全局或局部组件注册: ```javascript import OrgTree from 'vue2-org-tree'; // 如果你想把它设为全局可用的组件, 可以这样做: Vue.component('OrgTree', OrgTree); ``` 接着可以在单文件组件(SFC)中的 template 部分定义 HTML 结构: ```html <template> <div id="app"> <!-- 这里的 :data 属性绑定到 data() 函数返回的对象 --> <org-tree :data="treeData"></org-tree> </div> </template> <script> export default { name: "App", data(){ return{ treeData:[ {id:'root', label:"Root Node", children:[{id:'child1',label:"Child One"},{id:'child2',label:"Child Two"}]} ] } }, } </script> ``` 上述代码片段创建了一个根节点带有两个子节点的基础树形图。 #### 自定义样式与功能扩展 除了默认外观外，还可以通过自定义 CSS 类名来自定义样式；也可以利用事件监听器实现交互逻辑，比如点击某个特定节点触发某些操作等特性。 更多高级特性和选项设置，请参阅官方 GitHub 页面上的完整文档[^1]。
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值