vue结合element-ui实现多层复选框checkbox

1.需求如上图所以：

html相关代码如下：

 1 <div class="intent-course-wrapper">
 2     <div class="class-category" v-for="(firItem, firIndex) in tabledata" :key="firIndex">
 3       <div class="intent-course-header">
 4         <el-checkbox v-model="firItem.mychecked" @change="firstChanged(firIndex)"></el-checkbox>
 5         {{firItem.jiedianmingcheng}}
 6       </div>
 7       <div class="class-details" v-for="(subItem, subIndex) in firItem.classData" :key="subIndex">
 8         <el-checkbox v-model="subItem.mychecked" @change="secondChanged(firIndex)"></el-checkbox>
 9         <img v-lazy="subItem.kechengtupian_path" class="class-img" />
10         <div class="sub-details">
11           <p class="course-name">{{ subItem.courseName }}</p>
12           <div class="course-time">
13             {{subItem.classType}}
14             <span class="line"></span>
15             {{subItem.classHour}}
16           </div>
17           <p class="course-type">{{subItem.courseTypes.join('+') }}</p>
18         </div>
19         <div class="teacher-wrapper">
20           <div class="TeacherName">
21             <i></i>
22             {{subItem.courseTeacher}}
23           </div>
24         </div>
25         <div class="course-operate">
26           <p class="course-price" v-if="subItem.coursePrice">￥{{subItem.coursePrice}}</p>
27           <p class="combine-class" v-if="subItem.isCombineClass">
28             <i class="icon-combinate"></i>
29             {{subItem.combineClassName}}
30           </p>
31           <button class="btn-delete" @click="deleteCourse(subItem.kechengbianhao)">删除课程</button>
32         </div>
33       </div>
34     </div>
35     <div class="purchase-course">
36       <el-checkbox v-model="allChecked" @change="handleSelectAllClassfiy">全选</el-checkbox>
37       <span class="choose-class">
38         已选择
39         <span class="num">{{totalNum}}</span> 门课程
40       </span>
41       <span class="delete-class">删除选中的课程</span>
42       <router-link :to="{path:'/teamOrder'}" target="_blank" class="btn-intelligent">
43         <i class="icon-intelligent"></i>智能推荐
44       </router-link>
45       <button class="buy-class" @click="buyCourse">购买课程</button>
46     </div>
47     <div class="tip-box">
48       <i class="icon-tip-blue"></i>智能推荐：点击智能推荐，填写您的个人需求，我们可以根据您的需求，为您推荐最佳课程组合。
49     </div>
50   </div>

js相关代码如下：

data数据：

 1 tabledata: [
 2         {
 3           jiediandengji: '1',
 4           fujiedianbianhao: '0',
 5           jiedianmingcheng: '取证类课程',
 6           mychecked: false,
 7           classData: [
 8             {
 9               courseId: 'KC-2',
10               user: 'AS',
11               owner: 'AS',
12               id: '1f792fe742fb4dbba4af7b899c962567',
13               courseName: '金属非金属矿山排水作业',
14               classHour: '2',
15               coursePrice: '100',
16               courseType: '8',
17               courseDescribe: '',
18               courseTeacher: '张学军',
19               kechengtupian_path: require('../../../assets/images/temp/list1.png'),
20               classType: '石油储运类技能培训',
21               parentType: '生产类',
22               courseTypes: ['理论', '实操'],
23               mychecked: false
24             }
25           ]
26         },
27         {
28           jiediandengji: '2',
29           fujiedianbianhao: '0',
30           jiedianmingcheng: '安全生产类课程',
31           mychecked: false,
32           classData: [
33             {
34               courseId: 'KC-2',
35               user: 'AS',
36               owner: 'AS',
37               id: '1f792fe742fb4dbba4af7b899c962567',
38               courseName: '金属非金属矿山爆破作业',
39               classHour: '2',
40               coursePrice: '300',
41               courseType: '8',
42               courseDescribe: '',
43               courseTeacher: '张学军',
44               kechengtupian_path: require('../../../assets/images/temp/list2.png'),
45               classType: '石油储运类技能培训',
46               parentType: '生产类',
47               courseTypes: ['理论'],
48               mychecked: false,
49               isCombineClass: false
50             },
51             {
52               courseId: 'KC-2',
53               user: 'AS',
54               owner: 'AS',
55               id: '1f792fe742fb4dbba4af7b899c962567',
56               courseName: '油品基本特性分析以及汽柴油SDS',
57               classHour: '2',
58               coursePrice: '',
59               courseType: '8',
60               courseDescribe: '',
61               courseTeacher: '张学军',
62               kechengtupian_path: require('../../../assets/images/temp/list3.png'),
63               classType: '石油储运类技能培训',
64               parentType: '生产类',
65               courseTypes: ['实操'],
66               mychecked: false,
67               isCombineClass: false
68             },
69             {
70               courseId: 'KC-2',
71               user: 'AS',
72               owner: 'AS',
73               id: '1f792fe742fb4dbba4af7b899c962567',
74               courseName: '汽柴油化验检测基础',
75               classHour: '2',
76               coursePrice: '',
77               courseType: '8',
78               courseDescribe: '',
79               courseTeacher: '张学军',
80               kechengtupian_path: require('../../../assets/images/temp/list4.png'),
81               classType: '石油储运类技能培训',
82               parentType: '生产类',
83               courseTypes: ['实操'],
84               mychecked: false,
85               isCombineClass: true,
86               combineClassName: '组合课程一'
87             }
88           ]
89         }
90       ],

computed代码如下：

 1 // 全选功能
 2     allChecked: {
 3       get () {
 4         let count = 0;
 5         for (let i = 0; i < this.tabledata.length; i += 1) {
 6           if (this.tabledata[i].mychecked === true) {
 7             count += 1;
 8           } else {
 9             count -= 1;
10           }
11         }
12         if (count === this.tabledata.length) {
13           return true;
14         }
15         return false;
16       },
17       set (val) {
18         return val;
19       }
20     }

methods方法：

 1 // 一级change事件
 2     firstChanged(index) {
 3       const { classData } = this.tabledata[index];
 4       if (this.tabledata[index].mychecked === false) {
 5         classData.forEach((item) => {
 6           this.$set(item, 'mychecked', false);
 7         });
 8       } else {
 9         classData.forEach((item) => {
10           this.$set(item, 'mychecked', true);
11         });
12       }
13     },
14     // 二级change事件
15     secondChanged(index) {
16       const subData = this.tabledata[index].classData;
17       let tickCount = 0;
18       const len = subData.length;
19       for (let i = 0; i < len; i += 1) {
20         if (subData[i].mychecked === true) {
21           tickCount += 1;
22         } else {
23           tickCount -= 1;
24         }
25       }
26       if (tickCount === len) {
27         // 二级全勾选  一级勾选
28         this.$set(this.tabledata[index], 'mychecked', true);
29       } else {
30         // 二级未全选  一级不勾选
31         this.$set(this.tabledata[index], 'mychecked', false);
32       }
33     },
34     // 总的全选
35     handleSelectAllClassfiy(val) {
36       if (val) {
37         for (let i = 0; i < this.tabledata.length; i += 1) {
38           this.tabledata[i].mychecked = true;
39           this.firstChanged(i); // 调用一级change事件
40         }
41       } else {
42         for (let i = 0; i < this.tabledata.length; i += 1) {
43           this.tabledata[i].mychecked = false;
44           this.firstChanged(i); // 调用一级change事件
45         }
46       }
47     },

参考网站如下：https://www.cnblogs.com/samsara-yx/p/11083038.html