Vue实现全选、反选、全不选功能

一、搭建自己所需要的table列表

 

        

          

            

              
            
            
姓名
            
性别
            
年龄
          
          

            

              
            
            
1
            
2
            
3
          
        
  

二、渲染数据

现在运行一下代码，看看你运行后是否如下图一样（样式除外）：

 三、向数据中添加字段及v-model对应字段

四、全选、全不选实现方式

 methods:{
        //实现全选功能
        inputcheck(){
             this.list.map((item,index)=>{
                 item.checkeds=!this.allchecked;
             })
        }
    }

五、反选实现方式

  methods:{
        //实现全选功能
        inputcheck(){
             this.list.map((item,index)=>{
                 item.checkeds=!this.allchecked;
             })
        },
        // 实现反选功能
        tdcheckeds(){
           let self = this;
             this.list.map((item,index)=>{
                 if(item.checkeds!==false){
                   self.allchecked=item.checkeds;
                   self.checkedlist.push(item);
                 }else{
                   let e = self.checkedlist;
                   for (let i = 0; i <= e.length; i++) {
                     if (e[i] !== undefined) {
                       if (e[i].id === item.id) {
                         self.checkedlist.splice(i, 1);
                       }
                     }
                   }
                 }
             })
        }
    },
      watch:{
      checkedlist(e){ //如果多选数据发生改变时就会运行次函数
        if (e.length === 0) {
          this.allchecked = false;
        }
      }
    }

六、table属性