vue实现checkbox分组全选功能

效果如下：

 

<template>
	<div class="box">
		<div class="all">
			<input type="checkbox" id="all" v-model="checked" @change="doChange($event,'0')" >
			<label for="all">全选</label>
		</div>
		<div class="box-item" v-for="(item,key) in checkboxObj" :key="key">
			<div class="box-item-one">
				<input type="checkbox" :id="key" v-model="item.checked" @change="doChange($event,'1',key)" >
				<label :for="key">{{key}}</label>
			</div>

			<div class="box-item-two" v-for="(item2,index2) in item.list" :key="index2">
				<input type="checkbox" :id="item2" :value="item2" v-model="item.checkedNames" @change="doChange($event,'2',key)" >
				<label :for="item2">{{item2}}</label>
			</div>
			<div>checked: {{ item.checked }}</div>
			<div>names: {{ item.checkedNames }}</div>
		</div>
	</div>
</template>

<script>
export default {
    data() {
        return {
            // checked: false,//全选状态
            checkboxObj: {
                '江苏': {
                    list: ["南京", "苏州", "无锡"],
                    checked: false,//一级全选状态
                    checkedNames: []//选中的
                },
                '山东': {
                    list: ["济南", "青岛", "烟台"],
                    checked: false,
                    checkedNames: []
                },
                '河南': {
                    list: ["开封", "洛阳", "南阳"],
                    checked: false,
                    checkedNames: []
                }
            }
        };
	},
	computed:{
		checked:function(){
			let lens = Object.keys(this.checkboxObj).length;
			let num = 0;
			for (let ckey in this.checkboxObj) {
				let currentItem2 = this.checkboxObj[ckey];
				num += currentItem2.checked ? 1 : 0;
			}
			return lens == num;
		}
	},
    methods: {
		 /*
            ev：点击对象；type:点击的是 全选0 一级1 二级2；key:一级标志 江苏、山东、河南
            0、如果点击的是全选，设置一级、二级全部勾选或取消状态
			1、如果点击的是一级，设置当前项二级、全选状态
			2、如果点击的是二级，设置当前项一级、全选状态
		*/
        doChange(ev, type, key) {
            let checked = ev.target.checked;//当前项勾选状态
            if (type == 0) { //全选
                for (let ckey in this.checkboxObj) {
                    let currentItem = this.checkboxObj[ckey];
                    currentItem.checkedNames = checked ? currentItem.list : [];
                    currentItem.checked = checked;
                }
            } else if (type == 1) { //一级
                // 设置当前项二级的值
                let currentItem = this.checkboxObj[key];
                currentItem.checkedNames = checked ? currentItem.list : [];
                // 循环一级的状态,设置全选状态
                // this.setAllStatus();
            } else if (type == 2) {  //二级
                // 设置当前项一级的值
                let currentItem = this.checkboxObj[key];
                currentItem.checked = currentItem.checkedNames.length == currentItem.list.length ? true : false;
				// 设置全选状态
				// this.setAllStatus();
            }
		},
		// 设置全选的状态，用缓存属性代替
		setAllStatus(){
			let lens = Object.keys(this.checkboxObj).length;
			let num = 0;
			for (let ckey in this.checkboxObj) {
				let currentItem2 = this.checkboxObj[ckey];
				num += currentItem2.checked ? 1 : 0;
			}
			this.checked = lens == num;
		},
    }
};
</script>

<style lang="stylus" scoped>

.box {
	margin:50px;
    display: flex;
	.all{
		margin-right:20px;
	}
    .box-item {
        width: 300px;
        .box-item-two {
            margin-left: 20px;
        }
    }
}
</style>