树组件 el-tree 数据回显

树组件 el-tree 数据回显

树型布局的数据回显标题：
这里我只放了核心代码，重要是如何获取选中的树节点的id聚集和如何根据树节点的id聚集回显数据
大家根据需要自行更改！

1.         <el-tree
2.                 ref="authorityRef"
3.                 node-key="id"
4.                 :data="allAuthorityList"
5.                 show-checkbox
6.                 default-expand-all
7.                 empty-text="加载中，请稍候"
8.                 :props="defaultProps">
9.         </el-tree>

复制代码

1.         const authorityRef = ref(ElTree)
2.         const defaultProps = {
3.                 children: 'childrenList',
4.                 label: 'name'
5.         }
6.         //1、如何获取选中的树节点的id集合!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
7.        
8.         //我这里是通过Tree 组件的`getCheckedNodes`方法先获取到当前选中节点的数组然后再取其id值
9.         const checkedMenuAllIds = authorityRef.value.getCheckedNodes(false, true).map((node: any) => node.id)
10.        
11.         //如果传参要求只要最后一级的id值，可以再过滤处理一下
12.         const checkedMenuAllIds: number[] = authorityRef.value
13.                         .getCheckedNodes(false, true)
14.                         .filter((node) => !node.childrenList || node.childrenList.length === 0)
15.                         .map((node) => Number(node.id)) //只传最后一级的id
17.         //2、如何根据树节点的id集合回显数据!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
18.        
19.         //首先肯定是获取到树结构数据,为确保DOM更新后才调用setChecked，我这里使用nextTick
20.         //获取成功后，我这里是通过Tree 组件的`setChecked`方法设置节点是否被选中
21.         // 获取树级列表
22.         const { executeBody: fetGetCheckLibraryTree } = useRequest(api_get_checkLibrary_Tree(), {
23.                 onSuccess(res: any) {
24.                         allAuthorityList.value = res
25.                         //注意：确保数组里面的id类型与树形结构中的id类型匹配!
26.                         //这里的props.checkedAllId就是树节点的id集合，例如[ "1","574850805256267","574850805260359","574850805260357","574850805260361"]
27.                         if (props.checkedAllId) {
28.                                 // 回显已拥有的结构
29.                                 nextTick(() => {
30.                                         props.checkedAllId.forEach((id) => {
31.                                                 authorityRef.value?.setChecked(id, true, false)//核心代码就这一句!
32.                                         })
33.                                 })
34.                         }
35.                 }
36.         })

复制代码

如果后端返回的数据不是树节点的id聚集构成的数组布局，这里我的后端给我的是树型布局，我是通过递归处理的

1.         // 递归函数来提取 checkIds
2.         function extractCheckIds(checkIds, result: string[]) {
3.                 checkIds.forEach((checkId) => {
4.                         result.push(checkId.id);
5.                         if (checkId.childrenList && checkId.childrenList.length > 0) {
6.                                 extractCheckIds(checkId.childrenList, result);
7.                         }
8.                 });
9.         }
11.         //使用时
12.         if (res.checkIds && res.checkIds.length > 0) {
13.                 const checkedAllIds: string[] = [];
14.                 extractCheckIds(res.checkIds,checkedAllIds);
15.         }

复制代码

实现效果：

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。