vue单选控全选、全选控单选，并且循环多次该组件

---

前言

实现一个组件，它具有：

• 单选、全选功能
• 可以被循环、互不干扰

就像这样：

---

一、template部分

使用的UI库是腾讯的 magicbox

	// 不需要关注其中的类名和变量，只需关注方法：handleCheckedAll、handleChange
    <div class="group-label">{{ groupData.group_name }}</div>
        <bk-checkbox v-model="isCheckedAll" @change="handleCheckedAll">全选</bk-checkbox>
    </div>
    <bk-checkbox-group class="property-list" v-model="checkedList" @change="handleChange">
        <bk-checkbox class="property-item" v-for="item in groupData.attList" :key="item.property_id" :value="item.property_id">
            {{ item.property_name }}
        </bk-checkbox>
    </bk-checkbox-group>

二、js部分

代码如下：

data() {
    return {
        isCheckedAll: false,   *是否全选*
        checkedList: []        *该组已勾选的集合*
    }
},
computed: {
   attList() {
   	   *被循环的列表*
       return this.groupData.attList.map(item => item.property_id)
   }
}
methods: {
    *全选控单选*
    handleCheckedAll(val) {
        this.checkedList = val ? this.attList : []
        this.$emit('selectChanged')  *发送给父组件的事件，父组件使用 $refs + concat 提取所有已勾选*
    },
    *单选控全选*
    handleChange(val) {
        this.isCheckedAll = val.length === this.attList.length
        this.$emit('selectChanged')
    }
}

总结

1. 必须提炼成组件才能单独维护一组数据
2. 不要给bk-checkbox绑定事件或value，它是循环出来的
3. 汇总所有分组的勾选，需要父组件使用 $refs + concat 提取