Parent and child of treeselect

TreeSelect

TreeSelect You need to send the results of both the parent and child to the background , So the child id Splicing . Parent id- Sub level id.
Notice a pit here , Parent and child id May repeat , So when rendering, you need to set the sub level id Perform mosaic rendering , Otherwise, the reverse display error will occur .
TreeSelect Reverse attention ： The father key And value, It's the only one , All 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
    // }]
    // }
    // ]

//--- Split parent and child 
let splitObj = values.buList.map(item => {
    
      let line = item.split("-");
      let obj = {
    
        father: line[0],
        son: line[1]
      }
      return obj
    })

let skilled = [] // Be good at the field 
treeData.forEach(item => {
    
  let ab = splitObj.filter(ite => {
    
    return ite.father == item.key
  })
 //  Use traversal to find whether there is a parent id Same , Traversal when there is children, There is no return Traverse to the next item
// filter()  Method to create a new array , The elements in the new array are checked by checking all the eligible elements in the specified array .
  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：
filter() The elements passed later are also these , This is a ab Result

2.item.children:

3.values.buList

4.treeData: