Vue 2.0 全选，反选，全不选（二）

基于Vue 2.0的全选

点击打开链接查看演示

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

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

<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>
    <div class="row">
           <div class="col-sm-3">
               <div 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"><div>更多</div></h5>
                       </li>
                   </ul>

               </div>
           </div>
       </div>
  </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>