Vue: 如何实现树状收展及勾选联动功能-超实用干货

开启AdminJS成长之旅！这是我参与「AdminJS日新计划 · 2 月更文挑战」的第 3 天，点击查看活动详情

背景

需求

现在就有这么一个需求，实现一个权限配置功能，功能描述如下：

1. 遍历一颗拥有权限节点的树形结构的数据

   • 当勾选父级时，会将所有子级全部勾选上，反之，亦然
   • 当子级别中不全被勾选时，父级别都是半勾选状态
   • 当子级别未被勾选时，父级别都是非选中☑️状态

2. 实现收缩折叠功能

其实也不难，只要把思路理清楚，将逻辑分步实现就可以了。可能有人会说，你做出来了，才说不难；确实，刚开始的时候我也脑瓜子疼，但是不难又怎来的进步，否极泰来不就是那么回事吗，好像说得有点夸张了。

最终的实现结果如下：

至于图中的树状样式，涉及到两个比较关键的概念，就是递归遍历和对象地址引用这两个，其中地址引用是数据交互层面用到的思想，在这里不多加阐述。我主要想说的是树形结构数据定位父子元素方法封装，这个才是核心要素。

收益

在讲解这个核心要素之前，来个小插曲，也是有位初学者，找我帮忙实现这么一个功能，请看图

他的意思就是让我帮他实现这样的一个功能，如下

我仔细一看，这不就是类似我上个月的功能点吗，说实话，若是没做过，还真要费点时间，不过既然有人请我帮做，我也不好意思说太简单，哈哈哈