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

来源：互联网发布：linux wc命令C实现编辑：程序博客网时间：2024/06/08 06:22
基于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>
0 0