Die El-Tree-Select-Komponente von Element Plus, verzögertes Laden + Datenecho

1. Hintergrund

• Technologie: Vue3 + Element Plus
• Voraussetzung: Bei der Auswahl einer Organisation wird diese in einer Dropdown-Baumstruktur angezeigt.
• Verwendete Komponenten: TreeSelectBaumauswahlkomponente ( el-tree-select)

Dokumentadresse der offiziellen Website:

• https://element-plus.gitee.io/zh-CN/component/tree-select.html
• https://element-plus.gitee.io/zh-CN/component/tree.html

Eine kurze Beschreibung:

el-tree-selectKomponenten sind eine Kombination aus el-treeund el-select, und ihre ursprünglichen Eigenschaften wurden nicht geändert, sodass bestimmte Eigenschaften und Methoden immer noch auf el-treeund verweisenel-select

Zwei, verwenden

1. Dom

 <el-tree-select
   v-model="form.deptId"
   lazy
   ref="treeRef"
   :load="loadNode"
   :props="{ value: 'deptId', label: 'deptName'}"
   value-key="deptId"
   node-key="deptId"
   placeholder="请选择"
   show-checkbox
   check-strictly
   highlight-current
   :default-expanded-keys="defaultExpandedNodes"
 />

Zugehörige Objektbeschreibung:

v-model					id值。只要这个id值在树里能匹配上，就能够顺利回显出其label值。
lazy 					开启懒加载
load					加载子树数据的方法
value-key 				作为 value 唯一标识的键名。简单说就是主键，根据自己后端返回的字段修改
node-key				每个树节点用来作为唯一标识的属性。简单理解为树节点的主键，同value-key
props					配置选项。一般配置value和label的属性值
show-checkbox			开启复选框
check-strictly			可选择任一级别
highlight-current		选中高亮显示
default-expanded-keys	默认展开节点的key数组（懒加载时用于数据回显，这个属性非常关键）

2. methoden

/** 懒加载获取树形结构*/
function loadNode(node, resolve) {
    
    
  // node其实是需要展开树节点，但是第一次的node是个无用的数据，可以认为这个node是element给我们创建的，判断的话，就是level等于0
  if (node && node.level == 0) {
    
     
    getDeptData(0, resolve);
  } else {
    
    
    getDeptData(node, resolve);
  }
}

// 从后端获取数据列表
function getDeptData(node, resolve){
    
    
  //构造参数 
  let params = {
    
    };
  params.pageSize = 100;
  if(node == 0){
    
    				//根节点	
    params.deptId = '1';
  }else if(node.data.deptId){
    
    	//中间节点
    params.parentId = node.data.deptId;
  }else{
    
    
    return resolve([]);
  }
  // listDept是像后端访问组织结构数据的接口，根据实际场景修改
  listDept(params).then(response => {
    
    
    let data = response.data;
    return resolve(data);
  })
}

Die vom Back-End zurückgegebene Datenstruktur

3. Rückkehr

    Aufgrund der Verwendung von Lazy Loading gibt es im Gegensatz zum Laden aller Daten auf einmal nur eine ID, und die Baumstruktur wurde nicht gerendert, was zu keinem Label-Echo führt. Wir müssen also die gewünschten Baumknoten konstruieren, wenn die Komponente gerade gerendert wird.
    Das Attribut wird verwendet default-expanded-keysund gibt das Schlüsselarray des erweiterten Standardknotens an. el-tree-select ruft automatisch die loadNode-Methode gemäß dem Schlüsselarray auf, ruft die Daten ab und rendert die Baumknoten.

default-expanded-keysEs gibt zwei Möglichkeiten, über den Wert von nachzudenken:

• Rufen Sie beim Hinzufügen/Ändern den Schlüsselpfad vom Stammknoten der obersten Ebene zum aktuell ausgewählten Knoten ab, z. B.: ['01','0101','010101'], und speichern Sie ihn in der Datentabelle.
• Fügen Sie ein solches Feld in der Dept-Datentabelle hinzu, den Schlüsselpfad vom Wurzelknoten zum aktuellen Knoten

Weisen Sie schließlich beim Abrufen des Inhalts des aktuellen Datenformulars einfach den Schlüsselpfad des zu erweiternden Knotens zu zu default-expanded-keys, und er wird standardmäßig auf den aktuellen Knoten erweitert und das Label wird erfolgreich wiederholt.