开门见山Demo演示地址：http://www.longstudy.club/vue-okr-tree-doc/index.htmlgithub地址：https://github.com/qq449245884/vue-okr-tree项目背景因为最近公司需要做一个OKR，所以OKR里面有一个对齐视图，是一个数值结构，如下图：如果有人对齐了我的KR，就放在我的右边，如果我已经对齐了别人的KR，它就会放在我的左边，类似于上下级关系，所以这里我用两棵树来表示左边的关系和权利。在github上找了半天，这样的组件不多，也没有符合业务需求的组件，所以决定自己造轮子！分析既然是树，每个节点应该是同一个组件节点，所以节点组件应该是递归组件。整棵树应该有一个全局状态来管理从外部传入的值和提供给外部的属性和方法。每个阶段树节点还应该有一个对应的节点状态来管理节点本身的属性和方法。实现思路递归组件对于递归组件，Vue的官方文档是这样说的：一个组件可以在它的模板中递归调用自己。但是，只有当它有名称选项时才能这样做。这里我用OkrTreeNode.vue来表示树的节点，就是这样使用递归的。下面是组件的简单定义：exportdefault{name:'OkrTreeNode'}递归组件的使用需要要注意两点：必须有组件名称和组件中结束递归的条件。树的状态对于树的状态，我使用一个TreeStore类来表示它。这个实现主要参考了ElementUI中的树组件。TreeStore中的属性代表我从外面传进来的pros或者attr或者events和methods，都在这个对象里面管理。具体代码可以看这里：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.jsDemo演示了基本树结构展示的基本用法，默认方法是垂直方向。水平方向设置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渲染节点内容。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子树在根节点的左右两侧展开，该模式仅在direction为水平时有效，且leftDatadataBoolean必须提供—falseleftData显示左孩子的数据，该属性在onlyBothTree模式数组中启用——label-width节点的宽度，默认为自动宽度。如果label-width为数字类型，则单位为px；如果label-width是string类型，那么这个width会被设置为节点的style.width的值，节点的宽度将由外部样式string/number控制——label-height的节点的高度，默认为自动高度。如果label-height是数字类型，单位是px；如果label-height是string类型，高度会被设置为节点的style.height的值，节点的高度由外部样式string/number控制——label-class-name节点className的回调方法，也可以使用字符串为所有节点设置一个固定的classNameFunction(node)/String——current-lable-class-name当前选中节点的样式Function(node)/String—--show-collapsable节点是否可以展开Boolean--falsedefault-expand-all是否默认展开所有节点，该参数仅在show-collapsable为true时有效Boolean--falserender-content的内容区域的渲染功能treenodesFunctionFunction(h,node)——props配置选项，见下表对象——node-key每个树节点作为唯一标识的属性，整棵树应该是唯一的String——default-expanded-keys默认展开的节点的key数组（注意这个）当值为节点数据中的字段名时必须设置node-key，在整棵树中唯一)array——filter-node-method过滤树节点时执行的方法，返回true表示可以显示该节点，返回false表示将隐藏该节点Function(value,data,node)——props参数说明类型optionalvaluedefaultvaluelabel指定节点标签为节点对象的一个??属性值字符串，function(data,node)——children指定节点标签为节点对象的某个属性值字符串——##Events事件名称描述回调参数node-click在节点被点击时的回调有3个参数，分别是：传给data属性的数组中节点对应的对象，节点对应的Node，节点组件本身。node-expand节点展开时触发的事件有三个参数，分别是：传递给data属性的数组中节点对应的对象，节点对应的Node，节点组件本身node-collapse事件节点关闭时触发一共有三个参数，分别是：传递给data属性的数组中节点对应的对象，节点对应的Node，节点组件本身node-contextmenu当一个节点是右键单击，事件将被触发，依次为：event，传递给data属性的数组中节点对应的对象，节点对应的Node，节点组件本身。方法方法名称描述回调参数filter过滤树节点接收一个任意类型的参数，将作为filter-node-methodgetNode中的第一个参数根据data或key获取Tree组件中的节点，使用这个方法必须设置node-key属性(data)来获取节点的key或者通过setCurrentNode数据setCurrentNode来设置节点当前选中的状态，使用该方法必须通过node设置node-key属性(node)来选中节点setCurrentKeykey设置节点当前选中状态，使用该方法必须设置node-key属性(key)选中节点的key，为null则取消当前选中的节点getCurrentKey获取当前选中的key节点，使用该方法必须设置node-key属性，如果没有选中节点，返回null--getCurrentNode获取当前选中节点的数据，如果没有选中节点，返回null--remove删除Tree中的一个节点，使用这种方法tsetnode-key属性(data)待删除节点的idordataornodeappend将子节点(data,parentNode)添加到Tree中的节点。它接收两个参数，1.要附加的子节点的数据2.子节点的父节点的数据、键或节点。insertBefore是在Tree中的一个节点前面添加一个节点(data,refNode)接收两个参数，1.要添加的节点的数据2.要添加的节点之后的节点的数据、key或节点。insertAfter在Tree(data,refNode)中的一个节点后添加一个节点，接收两个参数，1.要添加的节点的数据2.要添加的节点的前一个节点的数据、key或节点。浏览器支持现代浏览器和InternetExplorer10+。如果觉得还不错，也请帮忙在github上给个star，如果觉得有什么地方需要优化，可以在github上提交PR，转载本文请联系大千世界公众号。
