全网第一篇：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）

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

        要实现多组动态数据的全选，搞清楚checkbox组件的 indeterminate 和 v-model 这两个属性非常重要，否则就算花N倍的时间去debug，可能仍然理不清头绪。这是我总结的两个属性两种状态叠加后的4种结果：

         其中indeterminate属性，用来表明本组checkbox是否处于（既没全选、也没有不选的）中间状态，如果设置为true，本组的父checkbox将会显示为样式。v-model用来表明是否处于全选状态，true表示全选，那么父checkbox将显示为样式，为false则显示为未勾选状态。所以，在后续的代码中，我们绑定的全选、单选事件函数中，需要正确设置这两个属性。

2.加载数据

        先看我用axios从后端拿到的JSON数据结构，分为角色、角色权限数组、所有权限数组等。 

import axios from "@/utils/http";
import { toRaw } from "@vue/reactivity";
import { reactive } from "vue";
...省略非关键代码...

  data() {
    return {
      roleId: 1,                //角色id
      role: { rights: [] },     //用于form绑定的role对象
      //L01 -> ['L0101','L0102']//checkRights绑定选中的权限，用于提交表单
      checkRights: reactive({}),//重点：把checkRights对象包装为Vue 3.x响应式的对象
      allRights: [],            //后