zoukankan      html  css  js  c++  java
  • 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,有兴趣的朋友可以研究下

  • 相关阅读:
    HDU 1017—A Mathematical Curiosity
    N !
    L
    J
    Danganronpa
    A water problem
    hdu 5461 Largest Point
    India and China Origins hdu 5652 (BFS+二分)
    D (多校训练三) poj1919 (二分)
    Discovering Gold lightoj 1030 (dp+期望)
  • 原文地址:https://www.cnblogs.com/sgs123/p/10436516.html
Copyright © 2011-2022 走看看