通过代码实现基于Vue 2.0的全选

基于Vue 2.0的全选

使用$set,在实例创建之后添加新的属性到实例上，不会触发视图更新，实现标记选中状态。

从项目中分离出来的，单个页面应用的，全选组件

<span style="font-family:Microsoft YaHei;font-size:12px;"><strong><style>  
      .relatedInstance>h2 {  
        margin-top: 0;  
        font-size: 20px;  
        color: #999;  
        }  
        .display{  
            display: none;  
        }  
        .relatedInstance ul {  
            padding: 0;  
        }  
  
        .relatedInstance>ul>li {  
            margin-bottom: 20px;  
        }  
  
        .relatedInstance>ul>li>h3 {  
            background: #f3f2f0;  
            color: #6bacdf;  
            font-size: 14px;  
            text-align: center;  
            line-height: 26px;  
        }  
        .relatedInstance>ul>li>h5 {  
            font-size: 14px;  
            text-align: center;  
            line-height: 20px;  
            display:none;  
            cursor: pointer;  
        }  
  
        .relatedInstance>ul>li>ul>li {  
            padding-left:28px;  
            overflow: hidden;  
            width: 100%;  
            font-size: 14px;  
            color: #999;  
            line-height: 20px;  
            min-height: 20px;  
            text-decoration: underline;  
            cursor:pointer;  
            margin:5px 0;  
        }  
        .relatedInstance>ul>li>ul>li {  
            word-wrap: break-word;  
        }  
  
        .relatedInstance li h3{  
            cursor:pointer;  
        }  
        .relatedInstance li h3 span{  
            float:right;  
            line-height:26px;  
            margin-right:5px;  
        }  
        .relatedInstance li li:hover{  
            color:#333;  
        }  
  
        .relatedInstance li ul{  
            overflow:hidden;  
        }  
        .relatedInstance li h3{  
            position:relative;  
        }  
  
        .relatedInstance li li{  
            position: relative;  
        }  
        .relatedInstance li h3 b, .relatedInstance li li b {  
            position: absolute;  
            top: 1px;  
            left: 5px;  
            vertical-align: middle;  
            margin: 0;  
            padding: 0;  
            width: 18px;  
            height: 18px;  
            background: url(../assets/blue.png);  
            border: none;  
            cursor: pointer;  
            background-position: 0 0;  
            margin-right: 5px;  
        }  
        .relatedInstance li h3 b {  
            position: absolute;  
            top: 4px;  
        }  
  
        .relatedInstance li h3 b:hover, .relatedInstance li li b:hover {  
            background-position: -20px 0;  
        }  
  
        .relatedInstance li h3 b.checked, .relatedInstance li li b.checked {  
            background-position: -40px 0;  
        }  
  </style>  
  
  
<template>  
    <p class="row">  
           <p class="col-sm-3">  
               <p class="relatedInstance">  
                   <h2>相关实体</h2>  
                   <ul>  
                       <li id="" v-for="(entity,index) in entities" @click="handleTit(index)">  
                           <h3>{{entity.text}}<b  :class="{'checked':allState[index]}" @click.stop="handleTitAll(index)"></b>  
                               <span :class="[entity.isShow?'glyphicon-minus':'glyphicon-plus']" class="glyphicon"></span></h3>  
                           <ul v-show="entitiesState[index]" @click.stop>  
                               <li v-for="(list,listIndex) in entity.child" @click="childHandle(listIndex,index)">  
                                   <b :class="{'checked':childState[index][listIndex]}"></b><span>{{list.text}}</span>  
                                   <span>(630)</span>  
                               </li>  
                           </ul>  
                           <h5 v-show="" class="more" data-pages="1"><p>更多</p></h5>  
                       </li>  
                   </ul>  
  
               </p>  
           </p>  
       </p>  
  </template>  
  
<script>  
   export default {  
       data(){  
          return{  
            entities:[  
              {text:'人员',child:[{text:'111111'},{text:'222222'}]},  
              {text:'项目',child:[{text:'111111'},{text:'222222'}]},  
              {text:'机构',child:[{text:'111111'},{text:'222222'}]},  
            ],  
            entitiesState:[],  
            childState:[],  
            allState:[],  
            listLen:0  
           // isShow: false,  
           // isChecked:false,  
           // isChosed:false,  
          }  
       },  
       methods:{  
          handleTit(i){  
             let state=this.entitiesState;  
             this.$set(state,i,!state[i]);  
          },  
          childHandle(i,pi){  
             let child=this.childState;  
             if(child[pi][i]) this.allState[pi]=false;  
             this.$set(child[pi],i,!child[pi][i]);  
             if(this.childState[pi][i]) this.checkList(this.childState[pi],pi);  
          },  
          handleTitAll(pi){  
             let child=this.childState[pi],  
                 allState=this.allState;  
             for(let i=0;i<this.listLen;i++){  
                this.$set(child,i,!allState[pi]);  
             }  
             this.$set(allState,pi,!allState[pi]);  
          },  
          checkList(child,pi){  
             let allState=this.allState,  
                 len=this.entities[pi].child.length;  
             for(let i=0;i<len;i++){  
                if(!child[i]) return;  
             }  
             this.$set(allState,pi,true);  
          }  
       },  
       created(){  
          let len=this.entities.length;  
          this.listLen=len;  
          for(let i=0;i<len;i++){  
             this.$set(this.childState,i,[])  
          }  
       }  
   }  
</script>  
</strong></span>