您现在的位置是：网站首页> 编程资料编程资料

Vue组织架构树图组件vue-org-tree的使用解析_vue.js_

2023-05-24 333人已围观

简介 Vue组织架构树图组件vue-org-tree的使用解析_vue.js_

Vue组织架构树图组件vue-org-tree

说明

最近需要作出一个组织架构图来可视化展示一下，最后找到vue-org-tree这个组件，觉得效果还不错~，可选节点颜色、横向/纵向展开、打开/收起，在这记录一下使用方法，效果图如下：

快速开始

安装

npm install --save-dev less less-loader npm install --save-dev vue2-org-tree

（可能还需要安装其他组件，报错的话根据提示再install就行）

然后在main.js引入

import Vue2OrgTree from 'vue2-org-tree'; Vue.use(Vue2OrgTree)

使用

API

  • props
propdescriptontypedefault
data Object 
propsconfigure propsObject{label: 'label', children: 'children', expand: 'expand'}
labelWidthnode label widthString | Number.auto
collapsablechildren node is collapsableBooleantrue
renderContenthow to render node labelFunction-
labelClassNamenode label classFunction | String-

events

  • on-expand
  • well be called when the collapse-btn clicked
  • on-node-click
  • well be called when the node-label clicked

参考html例子：https://github.com/hukaibaihu/vue-org-tree/blob/gh-pages/index.html

组件github：https://github.com/hukaibaihu/vue-org-tree

Vue组织架构图组件

vue-tree-chart

:deciduous_tree: Vue2树形图组件

logo

安装：

npm i vue-tree-chart --save

使用：

  • in template:
  • in script:
import TreeChart from "vue-tree-chart"; export default { components: { TreeChart }, data() { return { treeData: { ... } } } ...

属性：

  • json

组件数据，支持字段：

  • - name[String] 节点名称
  • - image_url[String] 节点图片
  • - children[Array] 节点后代
  • - mate[Object] 节点配偶

示例：

{ name: 'root', image_url: "https://static.refined-x.com/avat.jpg", children: [ { name: 'children1', image_url: "https://static.refined-x.com/avat1.jpg" }, { name: 'children2', image_url: "https://static.refined-x.com/avat2.jpg", mate: { name: 'mate', image_url: "https://static.refined-x.com/avat3.jpg" }, children: [ { name: 'grandchild', image_url: "https://static.refined-x.com/avat.jpg" }, { name: 'grandchild2', image_url: "https://static.refined-x.com/avat1.jpg" }, { name: 'grandchild3', image_url: "https://static.refined-x.com/avat2.jpg" } ] }, { name: 'children3', image_url: "https://static.refined-x.com/avat.jpg" } ] }

事件：

  • click-node

点击节点触发，接收当前节点数据为参数

演示：

npm run serve

构建：

npm run build-bundle

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

您可能感兴趣的文章:

上一篇：关于ES6中的箭头函数超详细梳理_javascript技巧_

下一篇：前端使用axios实现下载文件功能的详细过程_javascript技巧_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网