我开源了基于Vue的组织架构树组件

开门见山

网站建设哪家好，找创新互联！专注于网页设计、网站建设、微信开发、微信平台小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了漾濞免费建站欢迎大家使用！

Demo 演示地址：http://www.longstudy.club/vue-okr-tree-doc/index.html

github 地址：https://github.com/qq449245884/vue-okr-tree

项目背景

因为最近公司需要做一个OKR，OKR 里面有个对齐视图，是一个数型结构，如下图所示：

就拿我 小智 来说，如果有人对齐我的 KR 就放到我的右边，如果是我对齐了谁的 KR，就放到我的左边，类似一个上下级的关系，所以这里我用两棵树来表示左边与右边的关系。

在GitHub上找了半天，这类组件不多，也没有符合业务需求的组件，所以决定自己造轮子!

分析

  • 既然是树，那么每个节点都应该是相同的组件
  • 节点下面套节点，所以节点组件应该是一个递归组件
  • 整棵树应该有一个全局的状态，用来管理从外部传入的值以及向外部提供的属性和方法。
  • 每相树节点应该也要有一个对应的节点状态，来管理节点自身属性和方法。

实现思路

递归组件

对于递归组件，Vue 官方文档是这样说的：

组件在它的模板内可以递归地调用自己。不过，只有当它有 name 选项时才可以这么做。

这里我用 OkrTreeNode.vue 来表示树的节点，里面是这样用递归，下面是该组件简定：

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3. export default { 
    4.   
  
  
  
  4.   name: 'OkrTreeNode' 
    5.   
  
  
  
  5. } 
    6.

递归组件的使用需要注意的两点是组件里面要有组件name 以及结束递归的条件。

树的状态

对于树的状态，我用一个 TreeStore 类来表示，该实现方式主要是参考 ElementUI 中的 tree 组件。TreeStore 中的属性就表示我外部传入的 pros 或者 attr 或者 事件和方法，都在这个对象里面管理，具体的代码可以看这里：

https://github.com/qq449245884/vue-okr-tree/blob/main/src/lib/vue-okr-tree/model/tree-store.js

节点的状态

对于节点的状态，我用一个 Node 对象来表示，具体的代码可以看下面这个地址，这里就不展开说了：

https://github.com/qq449245884/vue-okr-tree/blob/main/src/lib/vue-okr-tree/model/node.js

Demo 演示

基础用法

基础的树形结构展示，默认方式垂直方向。

水平方向

将 direction 属性设置为 horizontal 就可以展示水平方向。

节点是否可被展开

节点可被展开,默认是不展开，通过show-collapsable设置节点可被展开。

节点默认全部展开

通过设置 default-expand-all 默认展开所有节点，该参数只有在 show-collapsable为true 时有效

可将 Tree 的某些节点设置为默认展开

通过 default-expanded-keys 设置默认展开的节点。需要注意的是，此时必须设置 node-key ，其值为节点数据中的一个字段名，该字段在整棵树中是唯一的。

节点的样式可自行设置节点的默认样式和选中的样式。

通过 label-class-name 设置节点的样式，支持字符和函数方式。通过 current-lable-class-name 设置当前节点选中的样式，支持字符和函数方式。

节点自定义内容

可自行设置节点内容。通过 render-content 渲染节点内容。

OKR 展示模式

该模式的出现，是为了实现跟飞书OKR 展示的视图一样效果，所以在 Tree 的模式下，扩展成左右两棵子树。该模式必须设置 onlyBothTree ，以及通过 leftData表示左子数的结构。

OKR 展示模式之自定义节点内容

与上常规 Tree 一样，我们也可以通过自定义渲染函数来制定节点的内容。

通过 render-content 渲染节点内容，通过返回 node 中的 isLeftChild 判断是否是左边的树。

节点过滤(不可展开)及支持的方法

通过关键字过滤树节点，在需要对节点进行过滤时，调用 Tree 实例的 filter 方法，参数为关键字。需要注意的是，此时需要设置 filter-node-method ，值为过滤函数。

节点过滤(可被展开)

通过关键字过滤树节点，在需要对节点进行过滤时，调用 Tree 实例的 filter 方法，参数为关键字。需要注意的是，此时需要设置 filter-node-method ，值为过滤函数。

支持的事件(不可展开)

不可展开时支持的事件有 节点点击 和 鼠标右键点击。

支持的事件(可被展开)

可展开时支持的事件有 节点点击、鼠标右键点击，节点的展开以及节点的关闭。

Attributes

参数 说明 类型 可选值 默认值
data 展示数据 array — —
direction 树的展开方向 String horizontal / vertical vertical
onlyBothTree 子树在根节点左右两边展开，该模式只有在 direction 为 horizontal 有效，且必须提供 leftData 数据 Boolean — false
leftData 展示左子数的数据，该属性于在 onlyBothTree 模式启用 array — —
label-width 节点的宽度，默认为自动宽度。如果 label-width 为 number 类型，单位 px；如果 label-width 为 string 类型，则这个宽度会设置为 节点 的 style.width 的值，节点的宽度会受控于外部样式 string/number — —
label-height 节点的高度，默认为自动高度。如果 label-height 为 number 类型，单位 px；如果 label-height 为 string 类型，则这个高度会设置为 节点 的 style.height 的值，节点的高度会受控于外部样式 string/number — —
label-class-name 节点 className 的回调方法，也可以使用字符串为所有的节点设置一个固定的 className Function(node)/String — —
current-lable-class-name 当前选中节点的样式 Function(node)/String — —
show-collapsable 节点是否可被展开 Boolean — false
default-expand-all 是否默认展开所有节点，该参数只有在 show-collapsable 为 true 时有效 Boolean — false
render-content 树节点的内容区的渲染 Function Function(h, node) — —
props 配置选项，具体看下表 object — —
node-key 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的 String — —
default-expanded-keys 默认展开的节点的 key 的数组(需要注意的是，此时必须设置node-key，其值为节点数据中的一个字段名，该字段在整棵树中是唯一的。) array — —
filter-node-method 对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏 Function(value, data, node) — —

props

参数 说明 类型 可选值 默认值
label 指定节点标签为节点对象的某个属性值 string, function(data, node) — —
children 指定节点标签为节点对象的某个属性值 string — —

## Events

事件名称 说明 回调参数
node-click 节点被点击时的回调 共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。
node-expand 节点被展开时触发的事件 共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身
node-collapse 节点被关闭时触发的事件 共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身
node-contextmenu 当某一节点被鼠标右键点击时会触发该事件 共四个参数，依次为：event、传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。

方法

方法名 说明 回调参数
filter 对树节点进行筛选操作 接收一个任意类型的参数，该参数会在 filter-node-method 中作为第一个参数
getNode 根据 data 或者 key 拿到 Tree 组件中的 node,使用此方法必须设置 node-key 属性 (data) 要获得 node 的 key 或者 data
setCurrentNode 通过 node 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性 (node) 待被选节点的 node
setCurrentKey 通过 key 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性 (key) 待被选节点的 key，若为 null 则取消当前高亮的节点
getCurrentKey 获取当前被选中节点的 key，使用此方法必须设置 node-key 属性，若没有节点被选中则返回 null —
getCurrentNode 获取当前被选中节点的 data，若没有节点被选中则返回 null —
remove 删除 Tree 中的一个节点，使用此方法必须设置 node-key 属性 (data) 要删除的节点的 id 或者 data 或者 node
append 为 Tree 中的一个节点追加一个子节点 (data, parentNode) 接收两个参数，1. 要追加的子节点的 data 2. 子节点的 parent 的 data、key 或者 node
insertBefore 为 Tree 的一个节点的前面增加一个节点 (data, refNode) 接收两个参数，1. 要增加的节点的 data 2. 要增加的节点的后一个节点的 data、key 或者 node
insertAfter 为 Tree 的一个节点的后面增加一个节点 (data, refNode) 接收两个参数，1. 要增加的节点的 data 2. 要增加的节点的前一个节点的 data、key 或者 node

浏览器支持情况

Modern browsers and Internet Explorer 10+.

如果你觉得还不错的话，还请帮忙在 github 上给个 star，如果你觉得哪些需要优化的可以到 github 上提个 PR。

本文转载自微信公众号「大迁世界」，可以通过以下二维码关注。转载本文请联系大迁世界公众号。

当前题目：我开源了基于Vue的组织架构树组件
分享URL：http://www.shufengxianlan.com/qtweb/news2/42452.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

Google知识

行业网站建设

成都企业网站建设　　 　节能环保网站建设方案　　 　成都外贸网站优化　　 　成都网络营销　　 　成都定制网站　　 　高防服务器租用　　 　德信企业管理　　 　圣月阀门　　 　成都400电话办理　　 　seo优化　　 　响应式报价　　 　正泰动物　　 　温江网站建设　　 　app软件开发公司　　 　德阳电信服务器托管　　 　宜宾做网站　　 　大橙子建站　　 　四川电信机房托管　　 　成都虚拟主机　　 　全网营销