共计 4477 个字符，预计需要花费 12 分钟才能阅读完成。
点赞再看，养成习惯
本文
GitHubhttps://github.com/qq44924588… 上曾经收录，更多往期高赞文章的分类，也整顿了很多我的文档，和教程材料。欢送 Star 和欠缺，大家面试能够参照考点温习，心愿咱们一起有点货色。
大家都说简历没我的项目写，我就帮大家找了一个我的项目，还附赠【搭建教程】。
单刀直入
Demo 演示地址：http://www.longstudy.club/vue…
github 地址：https://github.com/qq44924588…
我的项目背景
因为最近公司须要做一个 OKR，OKR 外面有个对齐视图，是一个数型构造，如下图所示：
就拿我 小智 来说，如果有人对齐我的 KR 就放到我的左边，如果是我对齐了谁的 KR，就放到我的右边，相似一个上下级的关系，所以这里我用两棵树来示意右边与左边的关系。
在 GitHub 上找了半天，这类组件不多，也没有合乎业务需要的组件，所以决定本人造轮子！
剖析
- 既然是树，那么每个节点都应该是雷同的组件
- 节点上面套节点，所以节点组件应该是一个递归组件
- 整棵树应该有一个全局的状态，用来治理从内部传入的值以及向内部提供的属性和办法。
- 每相树节点应该也要有一个对应的节点状态，来治理节点本身属性和办法。
实现思路
递归组件
对于递归组件，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/qq44924588…
节点的状态
对于节点的状态，我用一个 Node 对象来示意，具体的代码能够看上面这个地址，这里就不开展说了：
https://github.com/qq44924588…
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。
代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。
交换
文章每周继续更新，能够微信搜寻「大迁世界」第一工夫浏览和催更（比博客早一到两篇哟），本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录，整顿了很多我的文档，欢送 Star 和欠缺，大家面试能够参照考点温习，另外关注公众号，后盾回复 福利，即可看到福利，你懂的。
