el-tree carga datos de forma diferida y los nodos expandidos están vinculados a las condiciones de consulta

Descripción del efecto

El lado izquierdo de un determinado módulo del proyecto es la estructura de árbol el-tree de los datos de la ciudad, y el lado derecho son las condiciones de consulta de la ciudad y la visualización de resultados
.

1. Cuando hace clic en una ciudad a la izquierda para realizar una consulta, al cuadro de entrada de consulta de ciudad a la derecha se le asigna simultáneamente un valor (por ejemplo, si hace clic en Chengdu a la izquierda, Chengdu debería seleccionarse automáticamente en el cuadro de entrada de consulta de ciudad a la izquierda). bien)
2. De la misma manera, cuando se selecciona Chengdu en el cuadro de entrada de consulta de ciudad a la derecha, el nodo de Chengdu en la estructura de árbol de la izquierda se expandirá automáticamente.

Principio de implementación

Paso 1: el-tree establece la clave de nodo

En primer lugar, debe saber que la clave de nodo es una configuración necesaria para la expansión y selección. Su valor vinculado es único para todo el árbol (generalmente identificación vinculante, etc.). Si hay un duplicado, se informará un error. Al configurar para expandir un nodo al mismo tiempo, si se repite la ID de este nodo, la expansión será caótica.

Nota: Tenga en cuenta aquí que, en algunos momentos especiales, los datos del árbol devueltos por el fondo pueden no tener un valor único (por ejemplo, aquí, el ID del campo vinculado está vinculado, pero en los datos, hay casos en los que algunos ID de datos serán consistente) En este momento, debemos dejar que el backend procese la identificación en un valor único, o procesamos los datos obtenidos nosotros mismos (los proceso yo mismo aquí)

Paso 2: procese los datos durante la carga diferida y agregue valores únicos a todos los datos del árbol

Debido a que la cantidad de datos es demasiado grande, el-tree aquí utiliza carga diferida para obtener datos (:load="loadNode")

<el-tree
  ref="tree"
  node-key="key"
  accordion
  @node-expand="nodeExpandFn"
  :filter-node-method="filterNode"
  :data="treeData"
  :default-expanded-keys="expanded"
  :props="defaultProps"
  :indent="0"
  lazy
  auto-expand-parent
  highlight-current
  :load="loadNode"
  @node-click="handleNodeClick"
>
</el-tree>

Como puede ver, la clave de nodo está vinculada al campo clave , que es el valor único que agrego a cada objeto en los datos:
en el método loadNode, agregue un valor único al obtener los datos. No necesita pagar Preste atención a otros códigos aquí, solo concéntrese en Agregué un campo clave a cada objeto de nodo en función de las características de cada nodo (la ID de cada objeto en mis datos de nodo de tercer nivel es la misma, por eso elegí agregar un campo clave)

loadNode(node, resolve) {
    
    
 if (node.level === 0) {
    
    
   this.resolve = resolve
   this.chooseNode = node
   queryKSHDeviceTree({
    
     type: "0" }).then(res => {
    
    
     const treeData = [];
     res.resultValue.forEach(e => {
    
    
       e.key = e.id; // key ----------------------
       treeData.push(e);
     });
     resolve(treeData);
   });
 }
 else if (node.level === 1) {
    
    
   queryKSHDeviceTree({
    
     type: '1' }).then(res => {
    
    
     let treeData = [];
     res.resultValue.forEach(e => {
    
    
       e.key = e.id; // key ------------------------
       treeData.push(e);
     });
     resolve(treeData);
   });
 } else if (node.level === 2) {
    
    
   queryKSHDeviceTree({
    
     type: '2',pId: node.data.id }).then(res => {
    
    
     let treeData = [];
     res.resultValue.forEach(e => {
    
    
       // 这里根据当前对象自己的数据，拼出一个唯一值
       e.key = node.data.id + e.pId; // key --------------------
       treeData.push(e);
     });
     resolve(treeData);
   });
 }
}

Paso 3: (Vínculo) Haga clic en la estructura de árbol de la izquierda y el cuadro de consulta correspondiente a la derecha asignará valores automáticamente.

Este paso es relativamente simple y se opera en el evento de clic handleNodeClick de el-tree.

// 如果右侧查询框绑定的字段为 queryForm.cityId
// 点击第二级节点，对其他查询框赋值也同理
handleNodeClick(data, node) {
    
    
  if (data.label === "city") {
    
    
    this.queryForm.cityId = data.id;
  }
  else if ...
}

Paso 4: (Vínculo) Después de seleccionar las condiciones de consulta a la derecha, haga clic en Consulta y la estructura de árbol de la izquierda expandirá automáticamente los nodos correspondientes.

Se utiliza principalmente aquí: default-expanded-keys="expanded" (nodo expandido predeterminado)
expandido es una matriz que almacena valores clave.

其实当整个树形数据完整，并且设置了 auto-expand-parent 
（展开子节点的时候自动展开父节点）的情况下，
这个时候expanded只用保存最后一级的key值即可

但是，由于我这里的数据是懒加载的，意味着虽然你右侧选了最后一级的数据，点击查询，
但我左侧的树形数据里，还并未加载子级数据，所以这个时候，
即时你将key存入expanded里，它找不到，所以也是没有用的

***所以这个时候，我们需要把每一级要展开的节点key字段都拿到，并存入expanded中
***这样，el-tree在自动展开某一节点时，它会根据懒加载方法，自动获取子节点的数据
***当子节点数据获取到后，它也会将每个节点的key自动去匹配expanded中的值，若存在相同的，
就会接着展开
！！！（简单的说，就是把每一级要展开的节点key字段都拿到，并存入expanded中，
同时懒加载方法写好，其他的交给el-tree自己就行）

Después de la prueba, después de expandir el nodo, reasigne el valor de expandido. El nodo expandido no se cerrará automáticamente, por lo que también se escribe un método aquí.Primero cierra todos los nodos de el-tree.

// 查询方法
queryClick() {
    
    
  let obj = {
    
    
    refName: 'tree2',
    cityId: this.queryForm.cityId,
    twoId: this.queryForm.twoId,
    threeId: this.queryForm.threeId || ''
  }
  this.treeNodeLinkage(obj);
}

// 查询条件和el-tree显示联动
// cityId 为第一级id，twoId 为第二级，threeId 为第三级
treeNodeLinkage({
     
     refName, cityId, twoId , threeId}) {
    
    
  // 先将el-tree所有节点关闭
  let nodesMap = this.$refs[refName].store.nodesMap; // 拿到全部的node
  for(let key in nodesMap) {
    
    
    nodesMap[key].expanded = false;
  }
  // 这里的第二级id，对应懒加载方法里 node.level === 2时候
  // 所以这里的newId拼接方法，按照当时key的拼接方法来
  let newId = cityId + twoId;
  this.expanded = [cityId, newId];
  if(threeId) {
    
    
    this.expanded.push(threeId);
  }
},

Resumir

De hecho, este vínculo requiere principalmente comprender los atributos node-key y default-expanded-keys de el-tree .
En pocas palabras, qué nodo desea expandir, coloque el campo correspondiente a la clave de nodo del nodo en la matriz correspondiente a las claves expandidas predeterminadas.

La otra cosa es procesar los datos,
procesar los datos obtenidos por la interfaz en lo que quieras, esto es lo que el front-end tiene que hacer muchas veces.