Padre e hijo de TreeSelect

Directorio de artículos

ÁrbolSeleccionar

TreeSelect necesita pasar los resultados primarios y secundarios al segundo plano, por lo que las identificaciones de los secundarios se empalman. identificación del padre - identificación del niño.
Preste atención a una trampa aquí. Las identificaciones del padre y el hijo pueden estar duplicadas, por lo que las identificaciones de los hijos deben concatenarse y renderizarse al renderizar, de lo contrario habrá errores de visualización inversa.
Visualización inversa de TreeSelect Nota: la clave principal y el valor deben ser únicos y deben empalmarse.

// 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:
Los elementos pasados ​​después de filter() también son estos, este es el resultado de ab
inserte la descripción de la imagen aquí

2.artículo.niños:

inserte la descripción de la imagen aquí

3.valores.buList

inserte la descripción de la imagen aquí

4.treeData:

inserte la descripción de la imagen aquí

Supongo que te gusta

Origin blog.csdn.net/weixin_53125679/article/details/125593386
Recomendado
Clasificación