vue里递归结合tabletree实现父级,子级,增删改查的方式
程序员文章站
2022-07-04 19:33:07
...
递归增删改查的方法
//添加元素
export const getCurrentPart = (id, items, child) => {
// console.log(id, '-----', items, '---', child)
let result
for (var i in items) {
const item = items[i]
if (item.uuid === id) {
item.children.push(child)
break
} else if (item.children.length > 0) {
getCurrentPart(id, item.children, child)
}
}
return items
}
// 编辑元素
export const editCurrentPart = (id, items, value) => {
console.log(id, 'items-----', items, 'id---', value)
// let result
for (var i in items) {
const item = items[i]
if (item.uuid === id) {
item.name = value
console.log(item.name)
break
} else if (item.children.length > 0) {
editCurrentPart(id, item.children, value)
}
}
return items
}
// 删除元素
export const deleteCurrentPart = (id, items) => {
// let result
for (var i in items) {
const item = items[i]
// console.log(items)
if (item.uuid === id) {
// console.log(i)
// item.remove()
items.splice(i, 1)
console.log(item)
break
} else if (item.children.length > 0) {
deleteCurrentPart(id, item.children)
}
}
return items
}
引用,通过父组件的传值来判断
addsmodule (text) {
console.log(text, 'text')
this.isvisible = true
this.displayed = true
this.placeholder = text.name
console.log(text)
// console.log(text.uuid)
this.id = text.uuid
this.lable = '新增子模块'
},
editModule (text) {
console.log(text)
this.id = text.uuid
this.isvisible = true
this.displayed = false
this.lable = '编辑模块'
this.placeholder = '请编辑当前菜单'
this.currentmodule = text.name
},
deleteModule (text) {
console.log(text)
this.id = text.uuid
this.modules = deleteCurrentPart(this.id, this.modules)
console.log(this.modules)
// this.isvisible = true
},
提交
handleModules (value) {
// debugger
console.log(value, 'value')
if (this.placeholder === '当前菜单为*菜单') {
console.log(value.module)
const module = value.module
const item = {
uuid: generateUuid(),
parentUuid: '',
name: value.module,
children: []
}
this.modules.push(item)
this.isvisible = false
this.$message.success('添加成功')
console.log(this.modules)
return
// console.log(item)
} else if (this.placeholder === '请编辑当前菜单') {
console.log(this.id)
this.modules = editCurrentPart(this.id, this.modules, value.module)
// console.log(result)
this.isvisible = false
return
}
const child = {
uuid: generateUuid(),
parentUuid: '',
name: value.module,
children: []
}
console.log(this.id, 111)
console.log(this.modules, 222)
console.log(child, 333)
const result = getCurrentPart(this.id, this.modules, child)
// result.push(child)
this.$message.success('添加成功')
this.isvisible = false
console.log(result)
},
上一篇: vue综合案例——Vue购物车
下一篇: Gitflow工作流