wtree.vue
原理：每一个多选框都是一个节点，每个节点就是一个wtree组件，有父级（顶级level为0）,有子级（底层list[]是空的），组件之间状态传递是通过组件通信传递，对于外部数据checklist数组的修改是通过store实现的。初始化从底层状态传递到上层，一层一层传递。改变状态，不同状态改变，修改checklist数组。大概就这个思路，下面是代码：
d477f9ce7bf77f53fbcf36bec1b69b7a e388a4556c0f65e1904146cc1a846bee ed101ace28eb2e83d02513ccb1648d2b 4f555254255129eed389abd755c7120a 54bdf357c58b8a65c66d7c19c8e4d114 b7dc181cef335d3aca7c2764a59d47d472ac96585ae54b6ae11f849d2649d9e6 4333e88ff3da098980eb64a766f698c6 54bdf357c58b8a65c66d7c19c8e4d114 45a2772a6b6107b401db3c9b82c049c2 0f52e3d84a33e3edc14d95af6e1e0d9e f4795b2a19418f35194557a89112fcf5 af950f290a4bf6954df9def7b42b0d6c 7f23ea73d0b6e0b57b4268f2114cd7c4 5db79b134e9f6b82c0b36e0489ee08ed 54bdf357c58b8a65c66d7c19c8e4d114 45a2772a6b6107b401db3c9b82c049c2{{item.name}}54bdf357c58b8a65c66d7c19c8e4d114 94b3e26ee717c64999d7867364b1b4a3 b41f8f9c6e4179cbe6e1c8b508f6b506 2724ec0ed5bf474563ac7616c8d7a3cd 94b3e26ee717c64999d7867364b1b4a3 21c97d3a051048b8e55e3c8f199a54b2 3f1c4e4b6b16bbbd69b2ee476dc4f83a export default { name: 'wtree', props: ['item', 'level', 'state'], data () { 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', list: [], createswitch: true } }, computed: { levelnum () { return (this.level + 1) }, statesub () { return { selected: this.selected, origininfo: this.origininfo } } }, methods: { showsub () { this.open = !this.open }, changestate () { if (this.selected) { this.selected = false 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) { o.selectedstate = 'all' } } let data = { id: this.item.menuid, selectedstate: this.selectedstate, origininfo: 'parent' } this.$emit('changetopar', data) }, changebysub (data) { // 如果是父组件true,判断状态，未被选中，添加id到list，selectsub=true,通知父组件，添加store的数组中，选中通知父组件，this.list.length=this.length状态改为selected // 修改自身状态，添加list let temp = data if (data.origininfo === 'create') { this.list.push(data) } else { this.origininfo = 'parent' let statenull = 'null' let stateall = 'all' let statesub = 'sub' for (let o of this.list) { if (o.id === temp.id) { o.selectedstate = temp.selectedstate } if (o.selectedstate !== 'all') { stateall = null } if (o.selectedstate !== 'null') { statenull = null } } if (statenull) { this.selectedstate = statenull this.selected = false } else if (stateall) { this.selectedstate = stateall this.selected = true } else { this.selectedstate = statesub this.selected = true } let data = { id: this.item.menuid, selectedstate: this.selectedstate, origininfo: 'parent' } this.$emit('changetopar', data) } } }, watch: { selected () { // 初始化 if (this.origininfo === 'create') { // 不改变值 } else { // 改变值******** if (this.selected) { // 添加值 this.$store.commit('push_check_list', this.item.menuid) } else { // 删除值 this.$store.commit('splice_check_list', this.item.menuid) } } }, state () { // 子组件得到通知，如果状态一直，不去改变，如果状态不一致改变 if (this.state.origininfo === 'this') { this.origininfo = 'this' } if (this.origininfo === 'create') { this.origininfo = 'children' } else { if (this.state.origininfo !== 'parent') { if (this.state.selected) { this.selected = true this.selectedstate = 'all' if (this.list !== []) { for (let o of this.list) { o.selectedstate = 'all' } } } else { this.selected = false this.selectedstate = 'null' if (this.list !== []) { for (let o of this.list) { o.selectedstate = 'null' } } } } } }, list () { // 初始化数组 if (this.list.length === this.item.list.length) { let statenull = 'null' let stateall = 'all' let statesub = 'sub' for (let o of this.list) { if (o.selectedstate !== 'all') { stateall = null } if (o.selectedstate !== 'null') { statenull = null } } if (statenull) { this.selectedstate = statenull this.selected = false } else if (stateall) { this.selectedstate = stateall this.selected = true } else { this.selectedstate = statesub this.selected = true } let data = { id: this.item.menuid, selectedstate: this.selectedstate, origininfo: 'create' } this.$emit('changetopar', data) } } }, created () { // 初始化，把每个组件，从最底层添加到节点列表中，这样每个子组件都在list中了，就是origininfo=create的情况下添加数组，就不用判断数组长度，直接改变状态 if (this.createswitch) { let i = this.$store.state.checklist.indexof(this.item.menuid) console.log(!this.item.list) console.log('-----------------------初始化') if (!this.item.list) { if (i > -1) { this.selectedstate = 'all' this.selected = true } else { this.selectedstate = 'null' this.selected = false } let data = { id: this.item.menuid, selectedstate: this.selectedstate, origininfo: 'create' } this.$emit('changetopar', data) this.origininfo = 'this' } this.createswitch = false } console.log(this.state) console.log('----------------created') }, updated () { console.log('-------updated=======') let i = this.$store.state.checklist.indexof(this.item.menuid) console.log(!this.item.list) console.log('-----------------------初始化') if (!this.item.list) { if (i > -1) { this.selectedstate = 'all' this.selected = true } else { this.selectedstate = 'null' this.selected = false } let data = { id: this.item.menuid, selectedstate: this.selectedstate, origininfo: 'parent' } this.$emit('changetopar', data) this.origininfo = 'this' } }, mounted () { console.log('=========mounted-----') } } 2cacc6d41bbb37262a98f745aa00fbf0
调用 orglist带有层级的json数组
<w-tree v-for="o of orglist" :item="o" :level="0" :key="o.key"></w-tree>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
vue的defineproperty属性使用
微信小程序内怎样动态绑定类名
以上就是vue组件做出无限级多选菜单的详细内容。