基于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>