Element Plus の el-tree-select コンポーネント、遅延読み込み + データ エコー

1. 背景

• テクノロジー: Vue3 + Element Plus
• 要件: 組織を選択すると、ドロップダウン ツリー構造で表示されます。
• 使用するコンポーネント:TreeSelectツリー選択コンポーネント ( el-tree-select)

公式ウェブサイトの文書アドレス:

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

簡単な説明:

el-tree-selectコンポーネントはel-treeとの組み合わせでありel-select、元のプロパティは変更されていないため、特定のプロパティとメソッドは引き続き と を参照しますel-tree。el-select

二、使う

1. ドム

 <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"
 />

関連物件の説明:

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.方法

/** 懒加载获取树形结构*/
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);
  })
}

バックエンドから返されるデータ構造

三、回显

    遅延読み込みを使用しているため、すべてのデータを一度に読み込むのとは異なり、現時点では ID のみが存在し、ツリー構造はレンダリングされていないため、ラベル エコーは発生しません。そのため、コンポーネントがレンダリングされたときに必要なツリー ノードを構築する必要があります。
    属性は used でdefault-expanded-keys、デフォルトの展開されたノードのキー配列を示します。el-tree-select は、キー配列に従って自動的に loadNode メソッドを呼び出し、データを取得してツリー ノードをレンダリングします。

default-expanded-keysの値については、次の 2 つの考え方があります。

• 追加/変更する場合、['01','0101','010101'] のように、最上位のルート ノードから現在選択されているノードまでのキー パスを取得し、データ テーブルに保存します。
• そのようなフィールドを部門データ テーブルに追加します。ルート ノードから現在のノードへのキー パスです。

最後に、現在のデータ フォームのコンテンツを取得しながら、展開するノードのキー パスを に割り当てるだけでdefault-expanded-keys、デフォルトで現在のノードに展開され、ラベルが正常にエコーされます。