欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue2.0 实现全选和全不选

程序员文章站 2022-07-05 15:47:51
实现思路: 1、 v model 一个收集所有input(除全选框外)数组checkModel ,vue会动态将其checked为true的input的value值存入数组checkModel里 2 、watch函数来监听checkModel 属性,当其长度==input元素时 全选按钮选中 否则取 ......

实现思路:

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)
      }
      })
    }
  }
}

效果如图:

vue2.0 实现全选和全不选

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