Vue3开源Tree组件研发：节点勾选支持v-model

自研Tree组件有两个原因：1. 目前开源UI对Tree组件的用户API不太友好，2. 提升Vue3组件自研能力。

目前已实现的功能见上面思维导图。想象Tree组件的一个使用场景：后台管理员通过Tree组件来完成用户角色授权，同时支持对权限进行新增和删除等操作。这里既涉及到Tree节点的勾选操作，又涉及到节点增删。我们的研发就是同时很好的支持多个功能一起使用的情况，不能有bug，即便用户往往只启用一种功能。

自研Tree组件功能演示 - 节点勾选

用法示例

v-model绑定的是一个已选中节点backId数组。显然这里的节点我们只考虑叶子节点，也就是最外层的节点。id为后台模型的id。用户操作勾选，v-model的数据模型会自动更新。

功能演示

v-model初始值

v-model初始绑定的数组，会让视图完成默认的勾选。

勾选和反选

用户勾选后，v-model同步更新，绑定的数据为选中的叶子节点的backId。

删除节点

叶子节点删除时，v-model也会相应的更新：

支持删除父节点的情况下，v-model同样会一致更新。

新增节点下的勾选控制

新增一个节点后，该节点在没有保存时，不能被选中（本身不能被点击，同时外层父节点勾选，也不能级联选中它），只有保存从后台同步了backId才能勾选噢~

对已勾选的叶节点执行新增

可以看到原来存在于v-model中的绑定项也会被移除，因为它已变成父节点。

源码实现

见后续补充教程。