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 },
