思路:1.点击全选让所有复选框跟随全选状态。2.复选框全部选中全选选中.有一项未选中则全选不选中
全选实现:全选绑定v-model
<div><input type="checkbox" v-model="stare" @change="checkAll">全选</div>
data() {
return {
stare: false//全选v-model状态
}
},
复选框:绑定v-model
注意:这个方法需要在数据中添加一个flag为false的状态。当然这个flag可以自己命名,我这里v-model拿到的是循环过后的状态
<input type="checkbox" @change="radio" v-model="item.flag">
这里用命名为checkAll的@change事件循环储存的数据
methods: {
checkAll() {
this.$store.state.list.forEach(item => {
item.flag = this.stare
})
},
}
然后让我们复选框的状态等于全选的状态。
这样全选就完成了。
反选实现:
这里我们用绑定复选框的@change事件命名的radio
这里我们用了一个every()的方法,这个方法只有所有条件满足返回 true 否则就返回 false
我们这里就是看我们的flag的状态是不是满足所有条件,满足(所有都勾选上),就让全选变为true(勾选)
否则就让全选为false(未勾选)
radio() {
let arr = this.$store.state.list.every(item => item.flag)
console.log(arr);
if (arr) {
this.stare = true
} else {
this.stare = false
}
},
或者
radio() {
this.stare = this.$store.state.list.every(item => item.flag)
},