Element Plus的el-tree-select组件懒加载+数据回显详解

el-tree-select组件是el-tree和el-select的结合体,他们的原始属性未被更改,下面这篇文章主要给大家介绍了关于Element Plus的el-tree-select组件懒加载+数据回显的相关资料,需要的朋友可以参考下

一、背景说明

技术：Vue3 + Element Plus
需求：在选择组织机构时以树结构下拉展示。
用到组件：TreeSelect 树形选择组件（el-tree-select）

官网文档地址：

简要说明：

el-tree-select组件是el-tree和el-select的结合体，他们的原始属性未被更改，故具体属性、方法还是参照el-tree和el-select

二、使用

1. dom

相关属性描述：

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.methods

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

后端返回的数据结构