vue2.0 实现全选和全不选

r囧r小猫 2023-02-22 05:22 17阅读 0赞

## vue2.0 实现全选和全不选 ##

### 实现思路： ###

1、 v-model 一个收集所有input（除全选框外）数组checkModel ，vue会动态将其checked为true的input的value值存入数组checkModel里

2 、watch函数来监听checkModel 属性，当其长度==input元素时 全选按钮选中 否则取消

3 、全选按钮v-model checked 属性来显示当前选中状态 click事件里 当checked为true时 全选 所有input按钮被选中也就是checkModel的遍历存入其value值

### html代码： ###

<div>
    　　<input type="checkbox" @click="checkAll" v-model="checked">
    　　<span>全选</span>
    </div>
    <ul>
    　　<li v-for="(item,index) in list" :key="index" style="margin-top:20px;">
    　　　　<input type="checkbox" v-model="checkModel" :value="item.id">
    　　　　<span>{
       {item.name}}--</span>
    　　　　<span>{
       {item.age}}--</span>
    　　　　<span>{
       {item.money}}元</span>
    　　　　<mt-button @click="remove(index)" type="primary">删除</mt-button>
    　　</li>
    </ul>

### js代码： ###

data(){ 
    　　return { 
    　　　　list:[
    　　　　　　{ id:1,name:"明明",age:23,money:100},
    　　　　　　{ id:2,name:"红红",age:18,money:200},
    　　　　　　{ id:3,name:"强强",age:29,money:300}
    　　　　],
    　　　　checked:false, //是否全选
    　　　　checkModel:[] //双向数据绑定的数组，我是用的id
    　　}
    },
    watch:{ 
    　　checkModel(){ 
    　　　　if(this.checkModel.length==this.list.length){ 
    　　　　　　this.checked=true;
    　　　　}else{ 
    　　　　　　this.checked=false;
    　　　　}
    　　}
    },
    methods:{ 　　
    　　checkAll(){ 
    　　　　if(this.checked){ 
    　　　　　　this.checkModel=[];
    　　　　}else{ 
    　　　　　　this.list.forEach((item)=>{ 
    　　　　　　if(this.checkModel.indexOf(item.id)==-1){ 
    　　　　　　　　this.checkModel.push(item.id)
    　　　　　　}
    　　　　　　})
    　　　　}
    　　}
    }

### 效果如图： ###

![Alt][]

> 注：删除效果我用的是element-ui，有兴趣的朋友可以研究下

[Alt]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTYxMTAzMi8yMDE5MDIvMTYxMTAzMi0yMDE5MDIyNjExMDgwMzYxMS0yMTA5NjExODM1LnBuZw?x-oss-process=image/format,png