wTree.vue
原理：每一个多选框都是一个节点，每个节点就是一个wTree组件，有父级（顶级level为0）,有子级（底层list[]是空的），组件之间状态传递是通过组件通信传递，对于外部数据checkList数组的修改是通过store实现的。初始化从底层状态传递到上层，一层一层传递。改变状态，不同状态改变，修改checklist数组。大概就这个思路，下面是代码：
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,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,originInfo: 'create'
}
this.$emit('changeToPar',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,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,data)
this.originInfo = 'this'
}
},mounted () {
console.log('=========mounted-----')
}
}
调用 orgList带有层级的json数组
总结
以上所述是小编给大家介绍vue单个组件实现无限层级多选菜单。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
