vue2.0 实现全选和全不选

Posted sgs123

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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)
      }
      })
    }
  }
}

效果如图:

技术图片

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

以上是关于vue2.0 实现全选和全不选的主要内容,如果未能解决你的问题,请参考以下文章

JS实现全选和全不选

多选框的全选和全不选(复制)

js实现checkbox的全选和全不选功能

JavaScript实现全选和全不选

前端小demo——全选和全不选

JS——全选和全不选