vue里递归结合tabletree实现父级，子级，增删改查的方式

递归增删改查的方法

//添加元素
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)
    },
    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
    }