vue单个组件实现无限层级多选菜单功能

vue单个组件实现无限层级多选菜单功能单个组件实现无限层级多选菜单功能

主要介绍了vue单个组件实现无限层级多选菜单的相关资料，非常不错，具有参考借鉴价值,需要的朋友可以参考下

wTree.vue

原理：每一个多选框都是一个节点，每个节点就是一个wTree组件，有父级（顶级level为0）,有子级（底层list[]是空的），组件之间状态

传递是通过组件通信传递，对于外部数据checkList数组的修改是通过store实现的。初始化从底层状态传递到上层，一层一层传递。改变

状态，不同状态改变，修改checklist数组。大概就这个思路，下面是代码：

<template>

<div>

<img src="./../assets/selectedAll.png" v-if="selectedState === 'all'" width="15px" height="15px"/>

<img src="./../assets/selectedSub.png" v-if="selectedState === 'sub'" width="15px" height="15px"/>

<img src="./../assets/selectedNull.png" v-if="selectedState === 'null'" width="15px" height="15px"/>

</a>

</span>

<span>{{item.name}}</span>

</div>

<component v-show="open" :is="node" :item="o" :state="stateSub" v-for="o of item.list" :key="o.key" :level="levelNum" v-on:changeToPar="changeBySub">

</component>

</div>

return {

open: true,

node: 'wTree', // 控制菜单开关的

selected: false, // 选中的情况下

selectedState: 'null', // 子组件被选中的情况下向上传递all/sub/null

originInfo: 'create', // 组件信息源，create/parent/children/this

openClass: 'el-icon-caret-bottom',

closeClass: 'el-icon-caret-right',

selectClass: 'el-icon-check',

selectBg: '#1c8de0',

return (this.level + 1)

},

stateSub () {

return {

selected: this.selected,

originInfo: this.originInfo

}

}

},

methods: {

this.selectedState = 'null'

this.originInfo = 'this'

for (let o of this.list) {

o.selectedState = 'null'

}

} else {

this.selected = true

this.selectedState = 'all'

this.originInfo = 'this'

for (let o of this.list) {

originInfo: 'parent'

}

this.$emit('changeToPar', data)

},