通过为选中状态的标签加类名checked,使其选中。子列表中所有选中,全选按钮自动选中。需要引入vue.js
html
<div id="app">
<div class="row">
<div class="col-sm-3">
<div class="relatedInstance">
<h2>相关实体</h2>
<ul>
<li id="" v-for="(entity,index) in entities">
<h3 @click="toggleBar(index)" data-name="person">{{entity.text}}<b :class="{'checked':entity.isChecked}" @click.stop="checkall(index)"></b>
<span :class="[entity.isShow?'glyphicon-minus':'glyphicon-plus']" class="glyphicon"></span></h3>
<ul v-show="entity.isShow">
<li v-for="(list,listIndex) in entity.child.list">
<b @click="checklist(index,listIndex)" :class="{'checked': list.isChosed}"></b><span @click="showkeyWord">{{list.text}}</span>
<span>(630)</span>
</li>
</ul>
<h5 @click="morelist" v-show="" class="more" data-pages="1"><div>更多</div></h5>
</li>
</ul>
</div>
</div>
</div>
</div>
<script src="js/vue.js"></script>
<script>
var newlist = new Vue({
el:'#app',
data:{
entities:[
{text:'人员',isShow:false,child:{list:[{text:'F-35 program',isChosed:false},{text:'F-35 program',isChosed:false}],isChecked:false}},
{text:'项目',isShow:false,child:{list:[{text:'F-35 program1',isChosed:false},{text:'F-35 program2',isChosed:false}],isChecked:false}}
],
// isShow: false,
// isChecked:false,
// isChosed:false,
chosedList:[[],[]],
chosedUl:'',
},
methods: {
toggleBar: function(index) {
for(var i in this.entities){
if(i!=index){
this.$set(this.entities[i],'isShow',false);
}
}
this.$set(this.entities[index],'isShow',!this.entities[index].isShow);
this.chosedUl=this.entities[index].text;
},
checkall:function (index) {
var isChecked=!this.entities[index].isChecked;
this.$set(this.entities[index],'isChecked',!this.entities[index].isChecked);
for(var i in this.entities[index].child.list){
var dt=this.entities[index].child.list[i];
this.$set(dt,'isChosed',isChecked);
if(isChecked) this.chosedList[index].push(dt.text);
}
if(!isChecked) this.chosedList[index].splice(0,this.chosedList[index].length);
},
checklist:function (ulIndex,listIndex) {
var dt=this.entities[ulIndex].child.list;
this.$set(dt[listIndex],'isChosed',!dt[listIndex].isChosed);
if(dt[listIndex].isChosed) this.chosedList[ulIndex].push(true)
else this.chosedList[ulIndex].splice(ulIndex, 1);
if(this.chosedList[ulIndex].length === dt.length) this.$set(this.entities[ulIndex],'isChecked',true);
else this.$set(this.entities[ulIndex],'isChecked',false);
},
showkeyWord:function () {
},
morelist:function () {
}
},
})
</script>
结果