树形数据<->扁平化数据

Java实现数据扁平化与树形转换
import java.util.ArrayList;
import java.util.List;

public class OrganizationTreeDTO {
    private Long id;

    /** 父组织id */
    private Long parentId;

    /** 组织名称 */
    private String name;

    /** 描述 */
    private String description;

    private List<OrganizationTreeDTO> child = new ArrayList<OrganizationTreeDTO>();

    /**
     * @param id
     * @param parentId
     * @param name
     * @param description
     */
    public OrganizationTreeDTO(Long id, Long parentId, String name, String description) {
        super();
        this.id = id;
        this.parentId = parentId;
        this.name = name;
        this.description = description;
    }

    public Long getId() {
        return id;
    }

    public Long getParentId() {
        return parentId;
    }

    public String getName() {
        return name;
    }

    public String getDescription() {
        return description;
    }

    public void setId(Long id) {
        this.id = id;
    }

    public void setParentId(Long parentId) {
        this.parentId = parentId;
    }

    public void setName(String name) {
        this.name = name;
    }

    public void setDescription(String description) {
        this.description = description;
    }

    public List<OrganizationTreeDTO> getChild() {
        return child;
    }

    public void setChild(List<OrganizationTreeDTO> child) {
        this.child = child;
    }

}

 

//扁平化数据->树形数据

 public static List<OrganizationTreeDTO> buildTree(List<OrganizationTreeDTO> deptList, Long pid) {
        List<OrganizationTreeDTO> treeList = new ArrayList<OrganizationTreeDTO>();
        for (OrganizationTreeDTO node : deptList) {
            if (node.getParentId() == pid) {
                node.setChild(buildTree(deptList, node.getId()));
                treeList.add(node);
            }
        }
        return treeList;
    }

//树形数据->扁平化数据

 private static void parseTree() {

    }

 

<template> <el-container style="height: 100vh;"> <!-- 左侧固定菜单 --> <el-aside width="200px"> <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo" default-active="2" text-color="#fff" @open="handleOpen" @close="handleClose" > <div style="display: flex; justify-content: center;"> <div class="demo-basic--circle" style="display: flex; font-size:20px; align-items: center; gap: 10px;"> <div>测试系统</div> <el-avatar shape="square" :size="20" :src="squareUrl" /> </div> </div> <el-sub-menu index="1"> <template #title>系统管理</template> <el-menu-item index="1-1">账户管理</el-menu-item> <el-menu-item index="1-2">角色管理</el-menu-item> <el-menu-item index="1-3">权限管理</el-menu-item> <el-sub-menu index="1-4"> <template #title>日志管理</template> <el-menu-item index="1-4-1">登录日志</el-menu-item> <el-menu-item index="1-4-1">操作日志</el-menu-item> </el-sub-menu> </el-sub-menu> <el-sub-menu index="2"> <template #title>客户管理</template> <el-sub-menu index="2-1"> <template #title>租户管理</template> <el-menu-item index="2-1-1">api账户管理</el-menu-item> <el-menu-item index="2-1-2">租户信息管理</el-menu-item> </el-sub-menu> </el-sub-menu> </el-menu> </el-aside> <!-- 右侧主体内容 --> <el-main> <!-- 动态内容区域 --> <router-view /> </el-main> </el-container> </template> <script> import { ref } from 'vue' import { useRouter } from 'vue-router' export default { setup() { const router = useRouter() const squareUrl = ref('https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png') const handleMenuSelect = (index) => { switch (index) { case '1': router.push('/') break case '2': router.push('/home') break case '3': router.push('/home') break } } return { handleMenuSelect, squareUrl } } } </script>左边的菜单是树形结构怎么办?
最新发布
11-18
<template> <div class="app-container"> <!-- 操作工具栏 --> <div class="mb-4"> <el-button type="primary" @click="showFormDialog()">新增分类</el-button> </div> <!-- 树形表格 --> <el-table :data="tableData" row-key="id" :tree-props="{children: 'children'}" border style="width: 100%" > <el-table-column prop="id" label="ID" width="80"> <template #default=“{ row }”> <template v-if=“row.children && row.children.length > 0”> {{ row.id }} </template> <span v-else class=“empty-id”></span> </template> </el-table-column> <el-table-column prop=“title” label=“分类名称” /> <el-table-column label=“操作” width=“180” align=“center”> <template #default=“{ row }”> <el-button type=“primary” size=“small” @click=“showFormDialog(row.id)” >修改</el-button> <el-button type=“danger” size=“small” @click=“handleDelete(row.id)” >删除</el-button> </template> </el-table-column> </el-table> <!-- 表单对话框 --> <el-dialog v-model="formVisible" :title="currentId ? '修改分类' : '新增分类'" width="30%" > <el-form ref="formRef" :model="form" :rules="rules" label-width="80px" > <el-form-item label="分类名称" prop="title"> <el-input v-model="form.title" placeholder="请输入分类名称" /> </el-form-item> </el-form> <template #footer> <el-button @click="formVisible = false">取消</el-button> <el-button type="primary" @click="submitForm">确认</el-button> </template> </el-dialog> </div> </template>要求点击新增分类时弹出的对话框里再加一个上级选择,用select树形结构数据展示,给出vue3的全部代码
03-22
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值