这是一个组件：
<template>
<div>
<div>
<input type="checkbox" v-model="isCheckAll" @change="checkedAll"> 全选/取消全选
<input type="checkbox" v-model="isCheckInverse" @change="checkedInverse"> 反选/取消反选
</div>
<div v-for="(list, index) in checkboxLists">
<input type="checkbox" v-model="checkedLists" :value="list.id"> {{ list.product_name }}
</div>
<div>全选/反选 状态：{{ isCheckAll }}</div>
<div>选中列表：{{ checkedLists }}</div>
</div>
</template> <script>
export default {
data () {
return {
// 总数据
checkboxLists: [
{
id: ,
product_name: '银手链'
},
{
id: ,
product_name: '银手镯'
},
{
id: ,
product_name: '银耳环'
}
],
// 是否全选
isCheckAll: false,
// 是否反选
isCheckInverse: false,
// 选中列表
checkedLists: []
}
},
methods: {
// 全选/取消全选
checkedAll () {
// 初始化反选/取消反选
this.isCheckInverse = false
// 判断 全选/反选 是否点击
if (this.isCheckAll) {
let arr = []
// 循环全部数据并push到一个数组中
this.checkboxLists.forEach(element => {
arr.push(element.id)
});
// 选中列表赋值，此时的arr已经是全部数据了，直接赋值就等于选中所有checkbox
this.checkedLists = arr
} else {
// 如果 全选/反选 为假，则选中列表初始化
this.checkedLists = []
}
},
// 反选/取消反选
checkedInverse () {
// 这里不能直接用this.xxx赋值，具体参考https://www.cnblogs.com/nonsec/p/9322359.html
let tempArr = JSON.parse(JSON.stringify(this.checkboxLists))
let arr = []
var obj = {} // 先循环已勾选的，赋值给对象，对象key和value都为勾选的值
for (const i in this.checkedLists) {
obj[this.checkedLists[i]] = this.checkedLists[i]
} // 循环总的，然后判断上面对象的属性是否存在，如果存在则加入数组
for (const j in tempArr) {
if (!obj.hasOwnProperty(tempArr[j].id)) {
arr.push(tempArr[j].id)
}
} // 最后赋值，实现反选/取消反选功能
this.checkedLists = arr
}
},
watch: {
// 监听选中列表属性，当选中列表发生变化时，会运行此方法
checkedLists (newValue, oldValue) {
// 每次运行时，判断当前选中列表中的数组个数是否等于全部数据的数组个数，如果到某一时刻全等，则全选按钮为选中
if (newValue.length === this.checkboxLists.length) {
this.isCheckAll = true
} else {
// 否则为全不选
this.isCheckAll = false
}
}
}
}
</script>