首页 > 代码库 > vue.js实现checkbox的全选和反选
vue.js实现checkbox的全选和反选
摘要：
1、监听全选的值的变化，来改变checbox的数组值
2、监听选中checkbox的数组值的变化，当某一项checkbox有变化，判断是否checkbox的数值长度是否和列表数据的长度一致，来改变全选的值。
下面来一起看看是怎么实现的吧：
一、HTML
<template>
<table class="table table-bordered table-hover text-center" id="tabletList">
<thead>
<tr>
<th class="bgColor" width="25px"></th>
<th class="bgColor">获奖时间</th>
<th class="bgColor">用户ID</th>
<th class="bgColor">用户电话号码</th>
<th class="bgColor">奖品</th>
<th class="bgColor">用户地址</th>
<th class="bgColor">用户姓名</th>
<th class="bgColor">状态</th>
<th class="bgColor">编辑</th>
</tr>
</thead>
<tbody>
<tr v-for="(x, index) in list">
<td><input type="checkbox" class="checkBox" v-model="x.checked" @change="selectSingle(index, x.userId)"></td>
<td v-text="x.createTime"></td>
<td v-text="x.userId"></td>
<td class="uerPhone" v-text="x.phone"></td>
<td class="awardStatus">
<img :src="http://www.mamicode.com/x.goodsImg">
<p v-text="x.goodsName"></p>
</td>
<td class="address" v-text="x.address"></td>
<td class="userName" v-text="x.name"></td>
<td class="userAward" v-text="x.awardStatusStr"></td>
<td><a href="javascript:;" @click="modify(index)" class="curEdit">修改</a></td>
</tr>
</tbody>
</table>
二、js
export default {
data() {
checked: [],
allChecked:null,
checkedCount:0,
list: [],//后台传过来的json数据
total:{
num: 0,
page: 0
},
},
methods: {
selectSingle(index, id) {//单选个input点击事件
console.log(index)
console.log(this.list[index].checked)
// this.list[index].checked ^= 1
this.list.forEach((item, i) => {
if (item.userId === id && i !== index) {
item.checked = this.list[index].checked
this.$set(this.list, i, item)
}
})
if (this.list[index].checked === true) {
this.checkedCount ++
}
},
selectAll(event) {//全选
this.list.forEach((item, i)=> {
if(item.checked === true){
item.checked = i.checked
}
item.checked ^= 1
this.$set(this.list, i, item)
})
if (this.allChecked == true) {
this.checkedCount = this.total.num
}else{
this.checkedCount = 0
}
},
}
}
That‘s all. 是不是觉得超级简单。
vue.js实现checkbox的全选和反选