最后
今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！
可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
https://github.com/qq449245884/vue-okr-tree/blob/main/src/lib/vue-okr-tree/model/node.js
基础用法
基础的树形结构展示，默认方式垂直方向。
水平方向
将 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 ，值为过滤函数。
支持的事件(不可展开)
不可展开时支持的事件有 节点点击 和 鼠标右键点击。
支持的事件(可被展开)
可展开时支持的事件有 节点点击、鼠标右键点击，节点的展开以及节点的关闭。
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| :-- | — | :-: | :-: | :-: |
| 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) | — | — |
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| :-- | — | :-: | :-: | :-: |
| label | 指定节点标签为节点对象的某个属性值 | string, function(data, node) | — | — |
| children | 指定节点标签为节点对象的某个属性值 | string | — | — |
| 事件名称 | 说明 | 回调参数 |
| — | — | :-- |
| node-click | 节点被点击时的回调 | 共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。 |
| node-expand | 节点被展开时触发的事件 | 共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身 |
| node-collapse | 节点被关闭时触发的事件 | 共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身 |
| node-contextmenu | 当某一节点被鼠标右键点击时会触发该事件 | 共四个参数，依次为：event、传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。 |
| 方法名 | 说明 | 回调参数 |
| — | — | :-- |
| filter | 对树节点进行筛选操作 | 接收一个任意类型的参数，该参数会在 filter-node-method 中作为第一个参数 |
最后
文章到这里就结束了，如果觉得对你有帮助可以点个赞哦
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
– | :-- |
| filter | 对树节点进行筛选操作 | 接收一个任意类型的参数，该参数会在 filter-node-method 中作为第一个参数 |
最后
文章到这里就结束了，如果觉得对你有帮助可以点个赞哦
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
[外链图片转存中…(img-OtHOJDWt-1715752169389)]
3697
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
