欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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)
    },