，喜欢又看了一遍，习惯了。本文已收录到GitHubhttps://github.com/qq44924588...更多往期好评文章分类，我也整理了很多我的文档和教程资料。欢迎来到星和完美。面试时可参考考点复习。我希望我们能在一起。大家都说简历里没项目可写，所以给大家找了一个项目，还给了一个【搭建教程】。开门见山Demo演示地址：http://www.longstudy.club/vue...github地址：https://github.com/qq44924588...项目背景因为最近公司需要做一个OKR，有是OKR中的一个alignmentview，是一个数值结构，如下图：以我的小智为例，如果有人对齐我的KR，它就会放在我的右边，如果别人的KR是我对齐的，它会放在我的左边，类似一种上下级关系，所以这里我用两棵树来表示左右的关系。在github上找了半天，这样的组件不多，也没有符合业务需求的组件，所以决定自己造轮子！分析既然是树，每个节点应该是组件节点下的同一组节点，所以节点组件应该是递归组件。整棵树应该有一个全局状态来管理从外部传入的值，以及向外部提供的属性和方法。每个阶段树节点还应该有一个对应的节点状态来管理节点本身的属性和方法。实现思路递归组件对于递归组件，Vue的官方文档是这样说的：一个组件可以在它的模板中递归调用自己。但是，只有当它有名称选项时才能这样做。这里我用OkrTreeNode.vue来表示树的节点，就是这样使用递归的。以下是该组件的简要定义：exportdefault{name:'OkrTreeNode'}使用递归组件需要注意两点：组件中必须有组件名和递归结束的条件。树的状态对于树的状态，我使用一个TreeStore类来表示它。这个实现主要参考了ElementUI中的树组件。TreeStore中的属性是指从外部传入的pros或者attr或者events和methods都在这个对象中进行管理。具体代码可以看这里：https://github.com/qq44924588...节点的状态对于节点我用一个Node对象来表示状态，具体代码可以在下面的地址找到，这里就不展开了：https://github.com/qq44924588...Demo演示了基本用法的基本树结构展示，默认是垂直方向。水平方向设置direction属性为horizo??ntal，显示水平方向。节点是否可以展开节点是否可以展开，默认不展开，设置show-collapsable可以展开节点。默认情况下，展开所有节点。通过设置default-expand-all，默认展开所有节点。此参数仅在show-collapsable为true时有效。Tree的部分节点可以设置为默认展开。设置default-expanded-keys以默认展开节点。需要注意的是此时必须设置node-key，其值为节点数据中的一个字段名，在整棵树中是唯一的。节点的样式可以自行设置节点的默认样式和选中样式。通过label-class-name设置节点的样式，支持字符和函数。通过current-lable-class-name设置当前节点选择的样式，支持character和function方法。节点自定义内容您可以自行设置节点内容。通过render-content渲染节点内容。NodeAnimation这个组件内置了多种转场动画，可以直接使用。默认的过渡动画是okr-zoom-in-center。有关更多动画详细信息，请参阅底部的API文档。使用动画需要传入animate属性，通过animateName指定动画类型。默认动画是okr-zoom-in-center。OKR展示模式该模式的出现是为了实现和飞书OKR展示的视图一样的效果，所以在Tree模式下，展开成左右两个子树。mode必须设置为onlyBothTree，leftData表示左孩子的结构。OKR展示方式的自定义节点内容和上面的常规Tree是一样的，我们也可以通过自定义渲染功能来自定义节点的内容。通过render-content渲染节点内容，通过返回node中的isLeftChild来判断是否是左边的树。节点过滤（不可扩展）和支持的方法通过关键字过滤树节点。当需要过滤节点时，调用Tree实例的filter方法，参数为关键字。需要注意的是，此时需要设置filter-node-method，值为过滤函数。节点过滤（可扩展）通过关键字过滤树节点。当需要过滤节点时，调用Tree实例的filter方法，参数为关键字。需要注意的是，此时需要设置filter-node-method，值为过滤函数。支持的事件（不可扩展）不可扩展时支持的事件是节点单击和鼠标右键单击。支持的事件（可展开）展开时支持的事件包括节点点击、鼠标右键、节点展开和节点关闭。属性参数说明类型可选值默认值数据展示数据数组——方向树展开方向stringhorizo??ntal/verticalverticalonlyBothTree子树在根节点的左右两侧展开，该模式仅在方向为水平时有效，leftData数据必须提供Boolean——falseleftData显示左孩子的数据，在onlyBothTree模式下启用该属性——label-width节点的宽度，默认为自动宽度。如果label-width为数字类型，则单位为px；如果label-width是字符串类型，那么这个宽度会被设置为节点的style.width的值，节点的宽度将由外部样式string/number控制——label-height的节点的高度，默认为自动高度。如果label-height是数字类型，单位是px；如果label-height是string类型，高度会被设置为节点的style.height的值，节点的高度由外部样式string/number控制——label-class的回调-namenodeclassName的方法，也可以使用字符串为所有节点设置一个固定的classNameFunction(node)/String——current-lable-class-name当前选中节点的样式Function(node)/String——--show-collapsable节点是否可以展开boolean--falsedefault-expand-all是否默认展开所有节点，该参数仅在show-collapsable为true时有效boolean--falserender-content渲染的内容区域treenodeFunctionFunction(h,node)——props配置选项，详见下表-expanded-keys默认展开的节点的key数组（需要注意的是没有de-key此时必须设置，它的值是节点数据中的一个字段名，在整棵树中是唯一的。)array——过滤树节点时执行的filter-node-方法，返回true表示可以显示该节点，返回false表示将隐藏该节点Function(value,data,node)——niamte是否开启节点展开转场动画Boolean—falseanimate-name转场动画名称，支持的动画类型有okr-fade-in-linear/okr-fade-in/okr-zoom-in-center/okr-zoom-in-top/okr-zoom-in-bottomString——okr-zoom-in-centerprops参数说明类型可选值默认值label指定节点标签为节点对象的属性值字符串，function(data,node)——children指定节点标签为nodeobject一个属性值string—Events事件名称描述回调参数node-click节点被点击时的回调参数有3个，分别是：传递给data属性的数组中节点对应的对象，节点，以及节点组件本身。node-expand节点展开时触发的事件有3个参数，分别是：传递给data属性的数组中节点对应的对象，节点对应的Node，节点组件本身。node-collapse节点关闭时触发的事件一共有三个参数，分别是：传递给data属性的数组中节点对应的对象，节点对应的Node，节点组件本身。node-contextmenu当右键单击节点时，将触发该事件。一共有四个参数，依次为：event，传递给data属性的数组中节点对应的对象，节点对应的Node，节点组件本身。Method方法名说明回调参数filter过滤树节点接收一个任意类型的参数，作为filter-node-method中的第一个参数getNode根据data或者key获取Tree组件中的节点，使用这个该方法必须设置node-key属性（data）来获取节点的key或者datasetCurrentNode通过node设置节点当前选中状态，使用该方法必须设置node-key属性（node）来设置nodesetCurrentKeyofthenodethroughthekey被选中节点的当前选中状态，使用该方法必须设置node-key属性(key)被选中节点的key，如果为null，则取消当前高亮节点getCurrentKey获取当前选中节点的key，使用该方法必须设置node-key属性，如果没有选中节点，返回null——getCurrentNode获取当前选中节点的数据，如果没有选中节点，返回null——remove删除T中的一个节点ree，使用该方法必须设置node-key属性（data）要删除的节点的id或data或者nodeappend追加一个子节点（data,parentNode）到Tree中的一个节点。它接收两个参数，1.要追加的子节点的数据2.子节点的父节点的数据，key或者nodeinsertBefore在Tree中的一个节点前面添加一个节点(data,refNode)。它接收两个参数，1.要添加的节点的数据2.要添加的节点后面的节点的data,key或者nodeinsertAfter是Tree在节点后面添加一个节点(data,refNode)接收两个参数,1.待添加节点的数据2.待添加节点之前节点的数据、key或节点。浏览器支持现代浏览器和InternetExplorer10+。如果觉得还不错，请帮忙在github上给个star。如果你觉得有什么地方需要优化，你可以在github上提交PR。代码部署后可能存在的bug，无法实时获知。事后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的bug监控工具Fundebug。交流文章每周更新。可以微信搜索“大千世界”阅读即时更新（比博文早一两篇）。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi。我的文档发表了很多，欢迎Star和完善，可以参考考试中心面试复习，关注公众号，后台会回复福利，福利可以看到，你知道。
