1.data里面先定义两个变量,一个是定义总的checkbox,一个是定义列表的checkbox
data () { return { isAllChecked: false, checkedArray: [] } },
2.给列表checkbox数组定义初始全不选
setCheckedArray () { this.checkedArray = this.cart.map(() => false) },
this.cart定义的是所有数据的一个数组
3.现在 总的checkbox和列表的checkbox的初始化都已经完成
4.给总的checkbox和列表的checkbox的分别添加事件
4.1.总的checkbox添加onAllCheckChanged事件
<th class="col01">
<Checkbox class="checkbox" v-model="isAllChecked" @change="onAllCheckChanged"></Checkbox>
商品
</th>
4.2.onAllCheckChanged事件的js代码
onAllCheckChanged () { this.checkedArray.fill(this.isAllChecked) },
全选选中,列表的checkbox都选中
全选没有选中,列表的checkbox都没有选中
4.3.列表的checkbox添加onCheckChanged事件
<td class="col01 one-line" :title="item.text">
<Checkbox class="checkbox" v-model="checkedArray[index]" @change="onCheckChanged"></Checkbox>
<img class="thumbnail-goods" :src="item.cover">
{{ item.text }}
</td>
4.4.onCheckChanged事件的js代码
onCheckChanged () { this.checkedArray.every(item => item) && (this.isAllChecked = true) // 列表的checkbox都选中,全选选中 this.checkedArray.some(item => !item) && (this.isAllChecked = false) // 列表的checkbox都没有选中,全选没有被选中
},
购物车chenckbox的全选 全不选 部分选 反选功能实现
原文:https://www.cnblogs.com/pwindy/p/13272849.html