开门见山
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"