Java递归遍历element-ui树节点

该博客主要介绍了如何使用Java实现递归遍历数据集,将查询到的数据库记录转换为树形结构。数据包含parent_code来标识父节点,area_type表示节点等级。通过getAllNodes()和getChildNodes()方法,将List<Trees>对象转换为树型结构,方便前端渲染。Trees对象包括id、parentCode、label、areaType和children属性。

递归遍历树节点

返回的数据结构符合element次级下拉选和树形控件: 

 

数据库数据示例:parent_code指向父节点,area_type为节点等级

 

将查询到的结果集以List<Trees>格式查出调用getAllNodes()方法,Trees对象属性见下

    /**
     *
     * @param allList 将要遍历成树型结构的集合以Trees对象的形式传入
     * @return 返回封装好的List<Trees> 集合方便前端取出渲染
     */
    public static List<Trees> getAllNodes(List<Trees> allList) {
        List<Trees> parentList = new ArrayList<>();
        for (int i = 0; i < allList.size(); i++) {
            if("0".equals(allList.get(i).getParentCode())) {
                parentList.add(allList.get(i));
                allList.remove(i);
                i--;
            }
        }
        return getChildNodes(allList, parentList);
    }


    public static List<Trees> getChildNodes(List<Trees> allList, List<Trees> parentList) {
        for (int i = 0; i < parentList.size(); i++) {
            List<Trees> nodes = new ArrayList<>();
            for (int j = 0; j < allList.size(); j++) {
                if(parentList.get(i).getId().equals(allList.get(j).getParentCode())) {
                    nodes.add(allList.get(j));
                    allList.remove(j);
                    j--;
                }
            }
            if(nodes.size() > 0) {
                parentList.get(i).setChildren(nodes);
                getChildNodes(allList, nodes);
            }
        }
        return parentList;
    }

Trees对象结构

    // 编码
    private String id;

    // 父节点code
    private String parentCode;

    // 当前节点名称
    private String label;

    // 区域节点类型|节点等级
    private String areaType;

    // 子节点
    private List<Trees> children;

在使用 Element UI 的 `el-tree` 组件时,如果你只想获取树形结构的第一层数据(即只取根节点),可以通过对原始数据进行处理来实现。通常树形数据是一个递归结构,每个节点可能包含 `children` 字段,我们只需要提取没有父节点的顶层节点即可。 以下是一个完整的解决方案: ```vue <template> <div> <el-tree :data="firstLevelData" :props="defaultProps" @node-click="handleNodeClick" default-expand-all /> </div> </template> <script> export default { data() { return { // 原始的树形数据(可能有多层) treeData: [ { id: 1, label: '一级 1', children: [ { id: 2, label: '二级 1-1', children: [ { id: 3, label: '三级 1-1-1' }, { id: 4, label: '三级 1-1-2' } ] } ] }, { id: 5, label: '一级 2', children: [ { id: 6, label: '二级 2-1' }, { id: 7, label: '二级 2-2' } ] }, { id: 8, label: '一级 3' } ], defaultProps: { children: 'children', label: 'label' } } }, computed: { // 只提取第一层数据(根节点) firstLevelData() { // 确保只返回顶层节点,即使某些节点有 children 也只保留第一层 return this.treeData.map(node => ({ id: node.id, label: node.label // 不复制 children 字段,这样就不会展开下级 })) } }, methods: { handleNodeClick(data) { console.log('点击节点:', data) } } } </script> ``` ### 解释: - `treeData` 是完整的多层级树形数据。 - `firstLevelData` 是一个计算属性,它遍历原始数据并**仅提取每个根节点的关键信息(如 `id` 和 `label`)而不包含 `children` 字段**。 - 因为去除了 `children` 属性,所以 `el-tree` 不会渲染子节点,从而实现了“只显示第一层”的效果。 - 如果你希望仍然保留 `children` 但不让其可展开,也可以将 `children` 设为空数组或使用 `disabled` 控制。 --- 如果你想保留结构但禁用子节点展开,可以这样处理: ```js firstLevelData() { return this.treeData.map(node => ({ id: node.id, label: node.label, children: [] // 强制清空 children })) } ``` 或者动态控制是否加载子节点(懒加载模式)也是可行方案。 --- ### 注意事项: - 如果你的数据是通过接口异步加载的,建议在请求后立即过滤只保留第一层。 - 若需支持“点击加载下一层”,应使用 `lazy` + `load` 方法实现按需加载,而不是一次性传入深层数据。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值