如何将Vue的tree组件改写为识别长尾词的组件？

本文共计1567个文字，预计阅读时间需要7分钟。

前言：Tree 一直是大家熟悉的组件，许多大型后台管理系统都会用到。使用 Tree 组件可以完整地实现其中的层级关系，并具备展开收起选择等交互功能。

效果：节点可无限递归扩展。

前言

Tree一直是大家熟知的组件，做一些大型的后台管理系统都会用到。使用树组件可以完整的展现其中的层级关系，并具有展开收起选择等交互功能。

效果

节点可以无限的递归延伸
可以展开和收起子节点
如果子节点全部选择对应的父节点也应该选中，反之父节点取消选中对应子节点也需要取消选中

API

prop传递data属性，来描述所有的节点的信息

每个节点的配置描述如下

• title： 展示的标题
• expand 是否展开节点
• checked 是否选中节点
• children 子节点

以及还有两个event

• on-toggle-expand 展开和收起子列表时触发的
• on-check-change 点击checkbox触发

我们来 init tree主组件

首先需要考虑一个问题因为tree是递归遍历的，因为我们需要创建一个入口组件还有一个递归children的组件。