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

约定不等于承诺〃 2022-12-20 00:28 79阅读 0赞

> **点赞再看，养成习惯**
> 
> **本文 `GitHub` [https://github.com/qq449245884/xiaozhi][https_github.com_qq449245884_xiaozhi] 上已经收录，更多往期高赞文章的分类，也整理了很多我的文档，和教程资料。欢迎Star和完善，大家面试可以参照考点复习，希望我们一起有点东西。**

**大家都说简历没项目写，我就帮大家找了一个项目，还附赠[【搭建教程】][Link 1]。**

## 开门见山 ##

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

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

## 项目背景 ##

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

![ed8327488ed40097b08acfbd8c2bca5e.png][]

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

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

## 分析 ##

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

## 实现思路 ##

#### 递归组件 ####

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

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

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

<template>
      <OkrTreeNode
        v-for="child in leftChildNodes"
        :node="child"
      ></OkrTreeNode>
    </template>
    
    export default {
      name: 'OkrTreeNode'
    }

递归组件的使用需要注意的两点是组件里面要有组件`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][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][https_github.com_qq449245884_vue-okr-tree_blob_main_src_lib_vue-okr-tree_model_node.js]

## Demo 演示 ##

#### 基础用法 ####

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

![ca6455507b15cb10cba0d3df5e327440.png][]

#### 水平方向 ####

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

![6dd199ba7c1f599fe6c281654cbf00cd.png][]

#### 节点是否可被展开 ####

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

![1c87165c50721ec8ab05487a58c980e9.png][]

#### 节点默认全部展开 ####

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

![a9369ec3dd519cfd49b538eaf40c56cf.png][]

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

![9a78092eab067ccc24e6f89c9c68f080.png][]

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

## 节点的样式 ##

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

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

![adc2530cdfa770335f6ffa2a5be506f5.png][]

#### 节点自定义内容 ####

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

![d744571a66b2da178cd8dd593561e4e8.png][]

#### OKR 展示模式 ####

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

![3e42af08c85adba0ab721fcb02b3509b.png][]

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

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

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

![b9bf6baaec8613d2b00791921fe54f74.png][]

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

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

![b04ec94f810ed0cad83ad06ea2e63478.png][]

#### 节点过滤(可被展开) ####

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

![f6f916e5f14d2077552e01824caf4841.png][]

#### 支持的事件(不可展开) ####

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

![8761409fe0e2db41c57f096797717a02.png][]

#### 支持的事件(可被展开) ####

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

![47920125d00d6f92ab78ab8cecc48ec2.png][]

## Attributes ##

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

## props ##

## \#\# Events ##

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

## 方法 ##

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

## 浏览器支持情况 ##

Modern browsers and Internet Explorer 10+.

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

**代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 [Fundebug][]。**

## 交流 ##

文章每周持续更新，可以微信搜索「 大迁世界 」第一时间阅读和催更（比博客早一到两篇哟），本文 GitHub [https://github.com/qq449245884/xiaozhi][https_github.com_qq449245884_xiaozhi] 已经收录，整理了很多我的文档，欢迎Star和完善，大家面试可以参照考点复习，另外关注公众号，后台回复**福利**，即可看到福利，你懂的。

[https_github.com_qq449245884_xiaozhi]: https://github.com/qq449245884/xiaozhi
[Link 1]: http://www.longstudy.club/tuiguan/t1/index.html
[http_www.longstudy.club_vue-okr-tree-doc_index.html]: http://www.longstudy.club/vue-okr-tree-doc/index.html
[ed8327488ed40097b08acfbd8c2bca5e.png]: /images/20221120/70720c5ba283435d81527b7476f7a479.png
[Vue]: https://cn.vuejs.org/v2/guide/components-edge-cases.html#%E9%80%92%E5%BD%92%E7%BB%84%E4%BB%B6
[OkrTreeNode.vue]: https://github.com/qq449245884/vue-okr-tree/blob/main/src/lib/vue-okr-tree/OkrTreeNode.vue
[https_github.com_qq449245884_vue-okr-tree_blob_main_src_lib_vue-okr-tree_model_tree-store.js]: https://github.com/qq449245884/vue-okr-tree/blob/main/src/lib/vue-okr-tree/model/tree-store.js
[https_github.com_qq449245884_vue-okr-tree_blob_main_src_lib_vue-okr-tree_model_node.js]: https://github.com/qq449245884/vue-okr-tree/blob/main/src/lib/vue-okr-tree/model/node.js
[ca6455507b15cb10cba0d3df5e327440.png]: /images/20221120/b675c16dd92c4f848237eeb32e6445be.png
[6dd199ba7c1f599fe6c281654cbf00cd.png]: /images/20221120/9fc772877f174d6ca7b457c48f4ea764.png
[1c87165c50721ec8ab05487a58c980e9.png]: /images/20221120/aec426221b0b4832bf74bfa9e8414caa.png
[a9369ec3dd519cfd49b538eaf40c56cf.png]: /images/20221120/36cdb810b0704804a3b8a8c447041789.png
[9a78092eab067ccc24e6f89c9c68f080.png]: /images/20221120/59e0d3803b61481e8f09603216cac07f.png
[adc2530cdfa770335f6ffa2a5be506f5.png]: /images/20221120/3394e0c585c34de89bfcfeaa7c92302d.png
[d744571a66b2da178cd8dd593561e4e8.png]: /images/20221120/3959f322bcf94a31a2ac926bdf12a24c.png
[3e42af08c85adba0ab721fcb02b3509b.png]: /images/20221120/338a62aa3dfd4c6ea075081dca49ee6a.png
[b9bf6baaec8613d2b00791921fe54f74.png]: /images/20221120/3cc3a3d3d0e24ee6babbe3379d3f7391.png
[b04ec94f810ed0cad83ad06ea2e63478.png]: /images/20221120/f996af09c9db43a9b3f117b2f98a25fe.png
[f6f916e5f14d2077552e01824caf4841.png]: /images/20221120/3b23d77500ba4c108c080152df4efeab.png
[8761409fe0e2db41c57f096797717a02.png]: /images/20221120/1035a8d0c25241c892a4f24ead7d179e.png
[47920125d00d6f92ab78ab8cecc48ec2.png]: /images/20221120/a5acd4299eea422ca021d6df84e4e3ec.png
[Fundebug]: https://www.fundebug.com/?utm_source=xiaozhi