先看图吧。这个和购物车的效果大同小异。看看有没有时间，写个购物车的demo。实现的最终效果：
开关为 true的时候，默认是全选的
也可以单个控制选中状态：
直接上代码：
// 开关
<a-switch :checked="isAllChecked" @change="onCheckAllChange"/>
// 这里面用了ant-design-vue里面的 a-list
```
<a-list :data-source="imgList" :grid="{ gutter: 16, xs: 1, sm: 2, md: 4, lg: 4, xl: 6, xxl: 3 }">
<template v-for="(imgItem) in imgList">
<a-list-item class="imgList">
<a-row>
<a-col :span="24" class="imgContent">
<a-checkbox :class="toggleClass" :checked="isSelected(imgItem.id)" @change="onCheckboxChange(imgItem.id)" style="float: right;margin-right: 10px"></a-checkbox>
</a-col>
</a-row>
</a-list-item>
</template>
</a-list>
```
```js
data(){
return {
imgList: [] // 数据列表
isAllChecked: false, // 开关默认是关着的
selectedIds：[], // 后台需要的数据，这里先默认后台只需要id，下面会有处理，可以返回整个数组对象
selectedItems：[] // 这个就是给后台所有的数据，如果有筛选，去筛选一下就可以
}
},
```
computed: {
toggleClass() {
return !this.isAllChecked ? 'hidden' : '' // 根据开关的true 和false，下面复选框是显示还是隐藏
},
selectedItems() {
// 看后台都需要什么数据，将所有选中的数据都返回给后台
return this.imgList.filter(item => this.selectedIds.includes(item.id));
}
},
methods: {
```
onCheckAllChange(newValue) {
this.isAllChecked = newValue; // 更新checked的值，否则会导致，开关开一下里面就关上
if (newValue) {
this.selectedIds = this.imgList.map(item => item.id)
console.log(this.selectedIds) // 所有选中的id
} else {
this.selectedIds = []
}
},
isSelected(id) {
// 判断某个复选框是否选中
return this.selectedIds.includes(id);
},
onCheckboxChange(id) {
if (this.isSelected(id)) {
this.selectedIds = this.selectedIds.filter(item => item !== id);
} else {
this.selectedIds.push(id);
}
},
```
}
// 因为我的需求，是要求在提交的时候，才提交给后台数据，selectedItems 可以直接用，看你给后台传什么数据，```
console.log('获取所有选中的数据',this.selectedItems)
// 现在直接打印出来就是 imgList 里面所有的属性都有的一个 数组对象了
可以根据自己的需要去给后台
```
```
```
这个需求还是很好理解的，就是上面的开关控制下面的复选框，当开关 为 true 的时候，下面的复选框显示并且默认全选，也可以单独操作每个复选框。
