Vue实现全选,反选,全不选
在vue中实现默认选中以及获取单选/复选框的value值都会用到同一个方法,那就是在data中定义一个数组,然后用v-model=“这个数组”
data: {
whoms:[1,2],
}
这样就会默认选中value值是1和2的,当然也可以是字符串
<td><input type="checkbox" name="nid" id="nid" :value="site.nid" v-model="whoms" />{{key+1}}</td>
如果是多选框,那么你选中几个,data: { whoms:[], }
中就会存在几个value的值
这个就是vue全选的方法
<td style="text-align:left; padding:19px 0;padding-left:20px;">
<input type="checkbox" id="allChecked" :checked="whoms.length==sites.length" @click="allChecked"> 全选 /全不选<!-- <span>{{whoms}}</span> -->
</td>
<td style="text-align:left; padding:19px 0;padding-left:20px;">
<div class="button-group" id="fanChecked"><span class="button border-main" @click="fanChecked" style="padding:5px 15px;"> <span class="icon-edit"></span>反选</span></div>
</td>
在这里全选,反选可以是复选框也可以是按钮,自己随意
:checked="whoms.length==sites.length"
这句代码是实现,全选(全不选)这个按钮和整体数值的绑定,就是一个个的选中全部的复选框后,全选(全不选)按钮就会自动选中
allChecked: function() {
if (this.whoms.length == this.sites.length) {
// 全不选
this.whoms = [];
}else {
this.whoms = [];
// 全选
this.sites.forEach((site)=>{
this.whoms.push(site.nid); // 与checkbox的value统一
})
}
},
上面两个方法就是核心!
this.whoms.length == this.sites.length
当相等的时候说明是已经全部选中,这时候点击全选(全不选)按钮是为了全不选,否则就是打算全选
fanChecked:function(){
// f反选
this.sites.forEach((site)=>{
if(this.whoms.indexOf(site.nid)==-1){
this.whoms.push(site.nid);
}else{
var nkey=this.whoms.indexOf(site.nid);
this.whoms.splice(nkey,1);
}
})
},
反选 就是用到Java的indexOf()方法 如果数组中本来就有那就是你自己选中的也就是indexOf()方法返回的值大于-1 就利用索引把这个元素删除掉,如果*indexOf()方法返回的值等于-1说明数组中没有这个值,也即是你反选的内容,需追加,
这样vue的全选全不选反选就做好了