全网第一篇：Vue 3.x + Element Plus 动态数据的分组checkbox全选实现方案(含Vue 2.x和Element UI写法）

目录

最终效果：

实现步骤（Vue 3.x）

1.Element Plus/Element UI的checkbox组件介绍

2.加载数据

3.渲染组件到页面

4.处理全选/单选事件

5.提交选中的数据

附：Vue 2.x和老版Element UI写法区别

---

最终效果：

        在项目中我的业务需求是，添加修改角色时，根据后端响应的权限JSON数据，构造按模块分组、有父子关系的checkbox集合，实现全选、单选、取消权限等，并最终提交选中的数据集合。

        由于网络上这方面的示例（包括官方的）都是基于单组写死的数据，离真实项目的需求差很远，因此也只能根据组件的属性、Vue 3.x的语法自己研究实现方法。过程倒也不难，也就肝到了凌晨2点多才睡的。

实现步骤（Vue 3.x）