vue实现全选、反选功能

 
 
 
 
 


 

 
  

   

     
    {{item.name}}
   
    

     

      
       
      
      {{s.name}}
     
    
  
  

   
  
 
 

new Vue({
 el: "#content",
 data: {
  addList: [
  {
  "name":"用户管理",
  "checked":true,
  "children":[
  {"name":"添加","checked":true},
  {"name":"删除","checked":false},
  {"name":"修改","checked":true}
  ]
  }
 ]
 },
 methods: {
  selectAll: function(item) {
   //如果父级被选中，那么子集循环，全被给checked=true
   if(item.checked){
     item.children.forEach(function(item){
      item.checked=true;
     });
   }else{
   //相反，如果没有被选中，子集应该全部checked=false
     item.children.forEach(function(item){
    item.checked=false;
  
    });
   }
  },
 selectItem: function(item,s,index) {
  //父级选中条件
  //子集有选中的，那么父级checked=true
  //some检测的就是有一个满足的就为true
  item.checked=s.checked &＃63; true : item.children.some(a => a.checked);
  },
  submit: function(item,s) {
  //去拿所有的数据，返回给后台
  var formData=this.addList;
  console.log(JSON.stringify(formData));
 }
 }
 });