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

已于 2022-03-16 12:51:29 修改
阅读量4.3k 收藏 19
点赞数 1
文章标签： javascript 前端 vue.js
于 2022-01-20 19:14:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/devin_csdn/article/details/122608242
版权
本文介绍了如何在Vue CLI项目中使用vue2-org-tree插件展示架构关系。首先通过npm安装，然后在main.js中引入并注册。注意需要安装less和less-loader来解决编译问题。在组件中，通过<vue2-org-tree>标签并提供数据即可显示树形结构，数据结构包含一个父节点id和children子节点数组。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

如何使用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这一个标签。其他延伸出来的结构都是它内部渲染的结构，如何生成的我们不必深究。只需要知道这些属性即可。

<

最低0.47元/天 解锁文章
devin_csdn
关注
vue+ant design vue - 实现Tree树形控件带搜索库并可关键字搜索筛选功能，Antd组件库a-tree可搜索的树展示搜索结果并展开（根据关键字搜索过滤tree树列表数据，详细示例代码
高级前端工程师
05-06 4077
Vue AntDesign可搜索的树（只展示搜索结果并展开）vue+antd使用andt-tree实现可搜索的tree_antd选择树搜索，vue项目Antd 实现Tree树形控件带搜索功能，支持搜索展开tree，antd-tree组件带搜索框，Ant Design Vue组件Tree树形控件，Tree组件实现可搜索的树，ant.design组件库中的Tree组件实现可搜索的树，树控件的搜索功能，antd Tree 组件 带搜索，动态list数据，tree嵌套数据，搜索后关键字标红，具备搜索功能的树形组件，
Vue2-org-tree详解
CJHCJHc的博客
09-18 4032
vue2-org-tree的使用
vuejstree是一个用于Vue20的树形插件
08-10
vue-jstree是一个用于Vue2.0 的树形插件
基于vue2+ElementUI的el-tree封装一个带搜索的树形组件
最新发布
qq_40896145的博客
04-15 444
TreeSelect组件可以直接Copy进行使用，其中common-simple-input为图中el-input输入框的蓝底亮框样式，可根据自身需求进行样式自定义开发。
vue中树状组织架构插件
weixin_47941995的博客
08-31 4423
vue树状组织架构插件
实现树形结构的插件vue-tree-color及元素放大缩小拖动
boundle_ss的博客
12-14 2577
实现树形结构的插件vue-tree-color及元素放大缩小拖动
一款实现树形结构的插件vue-tree-color
NIKKT的博客
04-28 3532
通过以上步骤，我们可以在Vue中使用vue-tree-color组件实现树形结构的展示和交互，并且可以自定义节点图标和颜色。需要注意的是，vue-tree-color还支持更多的配置选项和事件回调函数，可以根据实际情况进行使用和修改。vue-tree-color是一款基于Vue.js的树形组件，支持树形结构的展开/折叠、选中、拖拽等功能，并且可以自定义节点图标和颜色。vue-tree-color支持自定义节点图标和颜色。1.安装vue-tree-color。3.使用vue-tree-color。
vue 树形插件_vue2的树形插件
cuk5239的博客
07-24 3081
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-org-tree：基于Vue2.x的简单组织树
02-06
基于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 ) /...
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-org-tree
Crazymryan的博客
03-26 1万+
前言 最近公司项目（Vue + Element ）需求有用到 tree ，所以呢我去网上找了很多插件，都不是很符合我的要求。最后在GitHub上面找到了一款插件是 iview 的组织结...
vue项目中使用ztree树形插件.zip
03-10
vue项目中使用ztree树形插件
vue3.0 树形数据插件
七七的博客
09-30 687
vue 树形插件
Vue2-org-tree插件 树形管理 详解
weixin_71854821的博客
12-05 2833
Vue2-org-tree是一个基于Vue.js的组织树组件，用于展示和管理组织结构。它提供了一个简单易用的界面，可以快速构建出具有层级关系的组织结构图。
Vue2使用echarts树图（tree）
Vue Amazing UI（Vue3 + TypeScript + Vite）组件库唯一开发维护者
08-30 6832
Vue2使用echarts树图
vue使用vue2-org-tree
weixin_42324665的博客
09-11 6424
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中树状图+作用域插槽
weixin_57127914的博客
07-11 515
以上就是树状图 配合 作用域插槽的效果 ，它可以方。便我们发请求拿到数据后直接在里面使用。
Vue-树状图组件指南
gitblog_00621的博客
09-03 810
Vue-树状图组件指南 项目地址:https://gitcode.com/gh_mirrors/vu/Vue-Tree-Chart 项目介绍 Vue-Tree-Chart 是一个专为 Vue.js 设计的树状图组件，它便于在应用程序中展示层次结构数据。这个项目支持 Vue 2.x 版本，并且提供了清晰的数据绑定方式，使得开发者能够轻松地将树形结构嵌入到他们的Vue应用中。尽管此说明是基于 htt...
vue2 使用vue-org-tree 组件完整示例Demo vue2-org-tree
热门推荐
LlanyW的专栏
11-02 1万+
安装完成后，vue2项目根目录下package.json自动更新以上 2个包信息。安装vue2-org-tree, 然后再安装样式 less-loade。
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
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值