前言背景说明有很多插件可以满足树图的需求。但是针对特定的需求，插件中或多或少的小问题是无法满足的。于是看了一些插件，熟悉了里面的原理，就准备自己封装一个树形图组件。为了解释得更清楚，最好在脑海中有一个画面，这样更容易理解和展开。1.即我们先定义一个组件，在这个组件中绘制第一个节点。2.然后在第一个节点下递归调用自己的组件。这样一串像糖葫芦一样的节点就可以实现了3，但是这只是一个字符串，不是一棵树，所以需要在这个基础上画节点的地方加上圆形的绘图节点。这变成了一棵树。一般来说，先易后难。先把树干搞清楚，然后慢慢给树干加上树枝，这样就会画出一棵大树来展示详细的设计步骤（我个人不喜欢直接贴代码。上来，所以尝试用文字和简码把整个设计过程写清楚）1.数据格式[{label:'显示文字',pictype:'图标类型',children:[{label:'显示文字',pictype:'图标类型',children:[{label:'显示文字',pictype:'图标类型',},{label:'显示文字',pictype:'图标类型',},]},{label:'显示文字',pictype:'图标类型',children:[{label:'显示文字',pictype:'图标类型',}]},]}]2.数据格式解析这是获取到的数据格式，一般是后端返回前端，但是直接传给组件是不行的，因为需要考虑节点展开的高度。我在封装的时候，为了让组件内部更容易理解，我把height这个属性传入了组件。之前添加。计算格式如下：1、遍历数组，将节点对象中children属性的“所有叶子节点”的个数乘以节点的高度。2、假设节点的高度为70，以上图的数据格式为例，一个根节点对象中的孩子有两个节点对象，第一个孩子节点对象有2个叶子节点，第二个根节点对象有1个叶子节点，所以根节点的高度是703，第一个子节点的高度是702，第二个子节点的高度是701，所有叶子节点的高度也是7013，函数补充//计算高度，并添加高度属性，nodeInfo为根节点travelTree(nodeInfo){letchildrenInfo=nodeInfo.children;如果（！childrenInfo||childrenInfo.length==0）{nodeInfo.height=77;}else{//遍历叶子节点并为每个叶子节点分配一个高度childrenInfo.map((item)=>{this.traveTree(item);});//每个节点的高度与其子节点的高度相加nodeInfo.height=childrenInfo.reduce((preV,n)=>{returnpreV+n.height;},0);}返回nodeInfo;}3。组件内部代码
