一款简单实用的小插件vue2.0,实现下拉菜单的全选和全部选,可添加多个一级菜单和二级菜单,设置比较简单很容易上手。
本示例css样式均写在head部分里,可以自行修改为调用外部样式。
设置好需要显示菜单的元素,之后引入关键的javascript插件:
<div id="app">
<div class="row">
<div class="col-sm-3">
<div class="relatedInstance">
<h2>vue2.0实现下拉菜单全选和全不选</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></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>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<script src="js/vue.min.js"></script>
<script src="js/vue-resource.js"></script>
实例化一个VUE,并配置菜单列表的内容及相关方法:
var newlist = new Vue({
el:'#app',
data:{
entities:[
{text:'人员组成',child:[{text:'擎天柱'},{text:'大黄蜂'}]},
{text:'项目分类',child:[{text:'登月计划'},{text:'星际穿越'}]},
{text:'合作机构',child:[{text:'航空航天局'},{text:'超物质研究院'}]},
],
entitiesState:[],
childState:[],
allState:[],
listLen:0
},
watch:{
},
methods:{
handleTit(i){//点击父级
let state=this.entitiesState;
this.$set(state,i,!state[i]);
for(let a in this.entitiesState){
if(a!=i){
this.$set(state,a,false);
}
}//增加判断,改变同级的展开状态
},
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,[])
}
}
})
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791