Parent and child of TreeSelect

Article directory

TreeSelect

TreeSelect needs to pass the parent and child results to the background, so the ids of the children are spliced. parent id - child id.
Pay attention to a pitfall here. The ids of the parent and child may be duplicated, so the ids of the children need to be concatenated and rendered when rendering, otherwise there will be reverse display errors.
Note in TreeSelect display: the key and value of the parent must be unique and need to be spliced.

// buList=['1-1', '1-2', '2-1', '2-2']

// buList = [
    //   {
    
    
    //     id,
    //     name,
    //     children: [{
    
    
    //       id,
    //       nameA
    //     }, {
    
    
    //       id,
    //       nameA
    //     }]
    //   },
    //   {
    
    
    //     id,
    //     name,
    //     children: [{
    
    
    //       id,
    //       name
    //     }, {
    
    
    //       id,
    //       name
    //     }]
    //   }
    // ]

//---分割父级子级
let splitObj = values.buList.map(item => {
    
    
      let line = item.split("-");
      let obj = {
    
    
        father: line[0],
        son: line[1]
      }
      return obj
    })

let skilled = [] //擅长领域
treeData.forEach(item => {
    
    
  let ab = splitObj.filter(ite => {
    
    
    return ite.father == item.key
  })
 // 利用遍历寻找是否有父id一样的,有就遍历children,没有就return遍历下一个item
// filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
  if (ab.length < 1) {
    
    
    return
  }
  let obj = {
    
    
    id: item.key,
    name: item.title,
    children: []
  }
  item.children.forEach(ite => {
    
    
    values.buList.forEach(i => {
    
    
      if (ite.key == i) {
    
    
        obj.children.push(ite);
      }
    })
  })
  skilled.push(obj);
})

values.buList = skilled;

1. splitObj:
The elements passed after filter() are also these, this is the result of ab
insert image description here

2.item.children:

insert image description here

3.values.buList

insert image description here

4.treeData:

insert image description here

Guess you like

Origin blog.csdn.net/weixin_53125679/article/details/125593386
Recommended