互换扁平树形数据

最新推荐文章于 2024-07-14 12:56:18 发布
最新推荐文章于 2024-07-14 12:56:18 发布
阅读量50 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zxl_start/article/details/120675116
版权

树形数据 扁平化 数据转换 组织结构 层级关系
关键词由CSDN通过智能技术生成

互换扁平树形数据

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let arr = [
            {
                precinctId: "370300",
                precinctName: "淄博市应急局",
                precinctAddr: null,
                regionName: "淄博市",
                upPrecinctId: "0",
                precinctKind: 100,
                gpsType: null,
                gpsx: null,
                gpsy: null,
                gpsz: null,
                regionXy: null,
                areaCode: "370300",
                createUser: null,
            },
            {
                precinctId: "370300001",
                precinctName: "局机关",
                precinctAddr: "淄博市应急局",
                regionName: "淄博市",
                upPrecinctId: "370300",
                precinctKind: 101,
                gpsType: null,
                gpsx: null,
                gpsy: null,
                gpsz: null,
                regionXy: null,
                areaCode: "370300",
                createUser: null,
            },
            {
                precinctId: "370300001001",
                precinctName: "局领导",
                precinctAddr: null,
                regionName: "淄博市",
                upPrecinctId: "370300001",
                precinctKind: 101,
                gpsType: null,
                gpsx: null,
                gpsy: null,
                gpsz: null,
                regionXy: null,
                areaCode: "370300",
                createUser: null,
            },
            {
                precinctId: "370300002002",
                precinctName: "支队领导",
                precinctAddr: null,
                regionName: "淄博市",
                upPrecinctId: "370300002",
                precinctKind: 101,
                gpsType: null,
                gpsx: null,
                gpsy: null,
                gpsz: null,
                regionXy: null,
                areaCode: "370300",
                createUser: null,
            },
            {
                precinctId: "370300003005",
                precinctName: "中心领导",
                precinctAddr: null,
                regionName: "淄博市",
                upPrecinctId: "370300003",
                precinctKind: 101,
                gpsType: null,
                gpsx: null,
                gpsy: null,
                gpsz: null,
                regionXy: null,
                areaCode: "380300",
                createUser: null,
            },
            {
                precinctId: "370300002",
                precinctName: "综合行政执法支队",
                precinctAddr: "淄博市应急局",
                regionName: "淄博市",
                upPrecinctId: "370300",
                precinctKind: 101,
                gpsType: null,
                gpsx: null,
                gpsy: null,
                gpsz: null,
                regionXy: null,
                areaCode: "370300",
                createUser: null,
            },
            {
                precinctId: "370300001005",
                precinctName: "办公室",
                precinctAddr: null,
                regionName: "淄博市",
                upPrecinctId: "370300001",
                precinctKind: 101,
                gpsType: null,
                gpsx: null,
                gpsy: null,
                gpsz: null,
                regionXy: null,
                areaCode: "370300",
                createUser: null,
            },
            {
                precinctId: "370300002001",
                precinctName: "综合执行室",
                precinctAddr: null,
                regionName: "淄博市",
                upPrecinctId: "370300002",
                precinctKind: 101,
                gpsType: null,
                gpsx: null,
                gpsy: null,
                gpsz: null,
                regionXy: null,
                areaCode: "370300",
                createUser: null,
            },
            {
                precinctId: "370300003006",
                precinctName: "总调度室",
                precinctAddr: null,
                regionName: "淄博市",
                upPrecinctId: "370300003",
                precinctKind: 101,
                gpsType: null,
                gpsx: null,
                gpsy: null,
                gpsz: null,
                regionXy: null,
                areaCode: "380300",
                createUser: null,
            },
            {
                precinctId: "370300003",
                precinctName: "指挥中心",
                precinctAddr: "应急管理局",
                regionName: "淄博市",
                upPrecinctId: "370300",
                precinctKind: 101,
                gpsType: null,
                gpsx: null,
                gpsy: null,
                gpsz: null,
                regionXy: null,
                areaCode: "370300",
                createUser: null,
            },
            {
                precinctId: "370300001018",
                precinctName: "组织人事科",
                precinctAddr: null,
                regionName: "淄博市",
                upPrecinctId: "370300001",
                precinctKind: 101,
                gpsType: null,
                gpsx: null,
                gpsy: null,
                gpsz: null,
                regionXy: null,
                areaCode: "370300",
                createUser: null,
            },
            {
                precinctId: "370300002005",
                precinctName: "监督审理室",
                precinctAddr: null,
                regionName: "淄博市",
                upPrecinctId: "370300002",
                precinctKind: 101,
                gpsType: null,
                gpsx: null,
                gpsy: null,
                gpsz: null,
                regionXy: null,
                areaCode: "370300",
                createUser: null,
            },
            {
                precinctId: "370300003002",
                precinctName: "救援科",
                precinctAddr: null,
                regionName: "淄博市",
                upPrecinctId: "370300003",
                precinctKind: 101,
                gpsType: null,
                gpsx: null,
                gpsy: null,
                gpsz: null,
                regionXy: null,
                areaCode: "380300",
                createUser: null,
            },
            {
                precinctId: "370300001009",
                precinctName: "规划财务科",
                precinctAddr: null,
                regionName: "淄博市",
                upPrecinctId: "370300001",
                precinctKind: 101,
                gpsType: null,
                gpsx: null,
                gpsy: null,
                gpsz: null,
                regionXy: null,
                areaCode: "370300",
                createUser: null,
            },
            {
                precinctId: "370300002004",
                precinctName: "举报受理室",
                precinctAddr: null,
                regionName: "淄博市",
                upPrecinctId: "370300002",
                precinctKind: 101,
                gpsType: null,
                gpsx: null,
                gpsy: null,
                gpsz: null,
                regionXy: null,
                areaCode: "370300",
                createUser: null,
            },
            {
                precinctId: "370300003003",
                precinctName: "装备科",
                precinctAddr: null,
                regionName: "淄博市",
                upPrecinctId: "370300003",
                precinctKind: 101,
                gpsType: null,
                gpsx: null,
                gpsy: null,
                gpsz: null,
                regionXy: null,
                areaCode: "380300",
                createUser: null,
            },
            {
                precinctId: "370300001003",
                precinctName: "\r\n安全生产综合协调科",
                precinctAddr: null,
                regionName: "淄博市",
                upPrecinctId: "370300001",
                precinctKind: 101,
                gpsType: null,
                gpsx: null,
                gpsy: null,
                gpsz: null,
                regionXy: null,
                areaCode: "370300",
                createUser: null,
            },
            {
                precinctId: "370300002006",
                precinctName: "监察一室",
                precinctAddr: null,
                regionName: "淄博市",
                upPrecinctId: "370300002",
                precinctKind: 101,
                gpsType: null,
                gpsx: null,
                gpsy: null,
                gpsz: null,
                regionXy: null,
                areaCode: "370300",
                createUser: null,
            },
            {
                precinctId: "370300003004",
                precinctName: "技术科",
                precinctAddr: null,
                regionName: "淄博市",
                upPrecinctId: "370300003",
                precinctKind: 101,
                gpsType: null,
                gpsx: null,
                gpsy: null,
                gpsz: null,
                regionXy: null,
                areaCode: "380300",
                createUser: null,
            },
            {
                precinctId: "370300001019",
                precinctName: "安全生产巡查督查科",
                precinctAddr: null,
                regionName: "淄博市",
                upPrecinctId: "370300001",
                precinctKind: 101,
                gpsType: null,
                gpsx: null,
                gpsy: null,
                gpsz: null,
                regionXy: null,
                areaCode: "370300",
                createUser: null,
            },
            {
                precinctId: "370300002007",
                precinctName: "监察二室",
                precinctAddr: null,
                regionName: "淄博市",
                upPrecinctId: "370300002",
                precinctKind: 101,
                gpsType: null,
                gpsx: null,
                gpsy: null,
                gpsz: null,
                regionXy: null,
                areaCode: "370300",
                createUser: null,
            },
            {
                precinctId: "370300003001",
                precinctName: "监测科",
                precinctAddr: null,
                regionName: "淄博市",
                upPrecinctId: "370300003",
                precinctKind: 101,
                gpsType: null,
                gpsx: null,
                gpsy: null,
                gpsz: null,
                regionXy: null,
                areaCode: "380300",
                createUser: null,
            },
            {
                precinctId: "370300001002",
                precinctName: "危险化学品安全监督管理科",
                precinctAddr: null,
                regionName: "淄博市",
                upPrecinctId: "370300001",
                precinctKind: 101,
                gpsType: null,
                gpsx: null,
                gpsy: null,
                gpsz: null,
                regionXy: null,
                areaCode: "370300",
                createUser: null,
            },
            {
                precinctId: "370300002008",
                precinctName: "监察三室",
                precinctAddr: null,
                regionName: "淄博市",
                upPrecinctId: "370300002",
                precinctKind: 101,
                gpsType: null,
                gpsx: null,
                gpsy: null,
                gpsz: null,
                regionXy: null,
                areaCode: "370300",
                createUser: null,
            },
            {
                precinctId: "370300001004",
                precinctName: "安全生产基础科",
                precinctAddr: null,
                regionName: "淄博市",
                upPrecinctId: "370300001",
                precinctKind: 101,
                gpsType: null,
                gpsx: null,
                gpsy: null,
                gpsz: null,
                regionXy: null,
                areaCode: "370300",
                createUser: null,
            },
            {
                precinctId: "370300002009",
                precinctName: "监察四室",
                precinctAddr: null,
                regionName: "淄博市",
                upPrecinctId: "370300002",
                precinctKind: 101,
                gpsType: null,
                gpsx: null,
                gpsy: null,
                gpsz: null,
                regionXy: null,
                areaCode: "370300",
                createUser: null,
            },
            {
                precinctId: "370300001006",
                precinctName: "行政许可科",
                precinctAddr: null,
                regionName: "淄博市",
                upPrecinctId: "370300001",
                precinctKind: 101,
                gpsType: null,
                gpsx: null,
                gpsy: null,
                gpsz: null,
                regionXy: null,
                areaCode: "370300",
                createUser: null,
            },
            {
                precinctId: "370300002010",
                precinctName: "监察五室",
                precinctAddr: null,
                regionName: "淄博市",
                upPrecinctId: "370300002",
                precinctKind: 101,
                gpsType: null,
                gpsx: null,
                gpsy: null,
                gpsz: null,
                regionXy: null,
                areaCode: "370300",
                createUser: null,
            },
            {
                precinctId: "370300001015",
                precinctName: "科技和信息化科",
                precinctAddr: null,
                regionName: "淄博市",
                upPrecinctId: "370300001",
                precinctKind: 101,
                gpsType: null,
                gpsx: null,
                gpsy: null,
                gpsz: null,
                regionXy: null,
                areaCode: "370300",
                createUser: null,
            },
            {
                precinctId: "370300002011",
                precinctName: "监察六室",
                precinctAddr: null,
                regionName: "淄博市",
                upPrecinctId: "370300002",
                precinctKind: 101,
                gpsType: null,
                gpsx: null,
                gpsy: null,
                gpsz: null,
                regionXy: null,
                areaCode: "370300",
                createUser: null,
            },
            {
                precinctId: "370300001010",
                precinctName: "救援协调和预案管理科",
                precinctAddr: null,
                regionName: "淄博市",
                upPrecinctId: "370300001",
                precinctKind: 101,
                gpsType: null,
                gpsx: null,
                gpsy: null,
                gpsz: null,
                regionXy: null,
                areaCode: "370300",
                createUser: null,
            },
            {
                precinctId: "370300002012",
                precinctName: "监察七室",
                precinctAddr: null,
                regionName: "淄博市",
                upPrecinctId: "370300002",
                precinctKind: 101,
                gpsType: null,
                gpsx: null,
                gpsy: null,
                gpsz: null,
                regionXy: null,
                areaCode: "370300",
                createUser: null,
            },
            {
                precinctId: "370300001008",
                precinctName: "风险监测和综合减灾科",
                precinctAddr: null,
                regionName: "淄博市",
                upPrecinctId: "370300001",
                precinctKind: 101,
                gpsType: null,
                gpsx: null,
                gpsy: null,
                gpsz: null,
                regionXy: null,
                areaCode: "370300",
                createUser: null,
            },
            {
                precinctId: "370300001013",
                precinctName: "火灾防治管理科",
                precinctAddr: null,
                regionName: "淄博市",
                upPrecinctId: "370300001",
                precinctKind: 101,
                gpsType: null,
                gpsx: null,
                gpsy: null,
                gpsz: null,
                regionXy: null,
                areaCode: "370300",
                createUser: null,
            },
            {
                precinctId: "370300002003",
                precinctName: "外派",
                precinctAddr: null,
                regionName: "淄博市",
                upPrecinctId: "370300002",
                precinctKind: 101,
                gpsType: null,
                gpsx: null,
                gpsy: null,
                gpsz: null,
                regionXy: null,
                areaCode: "370300",
                createUser: null,
            },
            {
                precinctId: "370300001012",
                precinctName: "防汛抗旱科",
                precinctAddr: null,
                regionName: "淄博市",
                upPrecinctId: "370300001",
                precinctKind: 101,
                gpsType: null,
                gpsx: null,
                gpsy: null,
                gpsz: null,
                regionXy: null,
                areaCode: "370300",
                createUser: null,
            },
            {
                precinctId: "370300001011",
                precinctName: "地震和地质灾害救援科",
                precinctAddr: null,
                regionName: "淄博市",
                upPrecinctId: "370300001",
                precinctKind: 101,
                gpsType: null,
                gpsx: null,
                gpsy: null,
                gpsz: null,
                regionXy: null,
                areaCode: "370300",
                createUser: null,
            },
            {
                precinctId: "370300001014",
                precinctName: "救灾和物资保障科",
                precinctAddr: null,
                regionName: "淄博市",
                upPrecinctId: "370300001",
                precinctKind: 101,
                gpsType: null,
                gpsx: null,
                gpsy: null,
                gpsz: null,
                regionXy: null,
                areaCode: "370300",
                createUser: null,
            },
            {
                precinctId: "370300001016",
                precinctName: "调查评估和统计科",
                precinctAddr: null,
                regionName: "淄博市",
                upPrecinctId: "370300001",
                precinctKind: 101,
                gpsType: null,
                gpsx: null,
                gpsy: null,
                gpsz: null,
                regionXy: null,
                areaCode: "370300",
                createUser: null,
            },
            {
                precinctId: "370300001021",
                precinctName: "政策法规科",
                precinctAddr: null,
                regionName: "淄博市",
                upPrecinctId: "370300001",
                precinctKind: 101,
                gpsType: null,
                gpsx: null,
                gpsy: null,
                gpsz: null,
                regionXy: null,
                areaCode: "370300",
                createUser: null,
            },
            {
                precinctId: "370300001017",
                precinctName: "新闻宣传科",
                precinctAddr: null,
                regionName: "淄博市",
                upPrecinctId: "370300001",
                precinctKind: 101,
                gpsType: null,
                gpsx: null,
                gpsy: null,
                gpsz: null,
                regionXy: null,
                areaCode: "370300",
                createUser: null,
            },
            {
                precinctId: "370300001020",
                precinctName: "机关党委",
                precinctAddr: null,
                regionName: "淄博市",
                upPrecinctId: "370300001",
                precinctKind: 101,
                gpsType: null,
                gpsx: null,
                gpsy: null,
                gpsz: null,
                regionXy: null,
                areaCode: "370300",
                createUser: null,
            },
            {
                precinctId: "370300001007",
                precinctName: "驻村",
                precinctAddr: null,
                regionName: "淄博市",
                upPrecinctId: "370300001",
                precinctKind: 101,
                gpsType: null,
                gpsx: null,
                gpsy: null,
                gpsz: null,
                regionXy: null,
                areaCode: "370300",
                createUser: null,
            },
        ];
        function formatTree(obj) {
            let copyedObj = JSON.parse(JSON.stringify(obj)) // 深拷贝源数据
            return copyedObj.filter(parent => {
                let findChildren = copyedObj.filter(child => {
                    return parent.precinctId === child.upPrecinctId
                })
                findChildren.length > 0
                    ? (parent.children = findChildren)
                    : (parent.children = [])
                return parent.upPrecinctId === '0' // 返回顶层，依据实际情况判断这里的返回值
            })
        }
        let newArr = formatTree(arr)
        console.log(newArr);
        let newarr = []
        function newList(arr) {
             arr.forEach(item => {
                newarr.push(item)
                item.children && item.children.length > 0 ? newList(item.children) : ""
            })
            return newarr
        }
        console.log(newList(newArr));
    </script>
</body>

</html>
淋雪小新
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
易语言服务端客户端互换收发数据
08-19
《易语言服务端客户端互换收发数据》 在计算机编程领域，网络通信是不可或缺的一部分，尤其是在构建分布式系统时。易语言，作为一种简洁且功能强大的编程语言，为开发者提供了实现服务端与客户端间数据交互的能力。...
js简单实现Select互换数据的方法
10-23
主要介绍了js简单实现Select互换数据的方法,涉及javascript动态操作select中option节点的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
数据互换器
04-27
数据互换器是一种高效实用的工具，主要用于在不同的数据格式之间进行转换，尤其适用于处理不同类型的数据类型，如将浮点型（float）数据转换为十六进制表示的字节序列。这种转换在处理二进制文件、网络通信、数据...
element ui 级联选择器动态加载
zxl_start的博客
07-09 8140
利用elementui的级联选择器先请求第一级数据，当用户点击第一级节点时再根据点击节点的id请求它的子类并渲染 <el-cascader clearable placeholder="请选择" @change="handleChange" v-model="form.dsdCode" :props="cascaderProps" ></el-cascader>
对vue项目js文件打包时进行混淆加密
zxl_start的博客
08-31 4878
vue打包文件混淆
electron 打包报错 npm ERR! code ELIFECYCLE npm ERR! errno 1
zxl_start的博客
06-09 3042
electron 打包出错
国密 sm2，sm3，sm4加解密兼容ie问题
zxl_start的博客
09-27 2926
IE浏览器中会出现如下报错： 找问题找了许久终于终于找到了。原因是在sm2，sm3，sm4的加密算法中用到了一个叫jsbn这个依赖。然而这个依赖并没有被webpack转化并编译称ES5的语法，大家都到IE的兼容性不怎么好，特别是对新语法的支持程度一直都不好。所有必须针对IE进行处理，借鉴这位博主文章具体处理如下： 1、看sm2，sm3，sm4文件中的源码不难发现，每个文件中都有const {BigInteger} = require(‘jsbn’)这一段代码，那么我们需要手动安装jsbn，在命令行执行npm
Echarts数据可视化toolbox工具框详解
zxl_start的博客
08-17 2797
echarts
vue+element ui 主题颜色切换
zxl_start的博客
07-19 2500
vue+element ui 主题颜色切换 效果图 项目结构 element-variables.scss文件 /* 改变主题色变量 */ $--color-primary: #1890FF; /* 改变 icon 字体路径变量，必需 */ $--font-path: '~element-ui/lib/theme-chalk/fonts'; @import "~element-ui/packages/theme-chalk/src/index"; :export { theme: $--
el-upload 后台返回图片的URL，如何再次获得选取图片时的file.raw的一整个对象
zxl_start的博客
02-28 2352
el-upload 后台返回图片的URL，如何再次获得选取图片时的file.raw的一整个对象
echarts图表折线图柱状图多个X轴Y轴以及一个Y轴反向
zxl_start的博客
05-27 2214
echarts图表折线图柱状图多个X轴Y轴以及一个Y轴反向 option1: { color: ['#21E9F6', '#F2CE2E', '#EE2929', '#006DD9', '#1789FF'], tooltip: { trigger: 'axis' }, legend: { data: ['雨量', '水位', '保证水位', '警戒水位', '累计雨量'], sele
前端根据后台返回url下载文件
zxl_start的博客
02-23 1968
前端根据后台返回url下载文件（图片、word、pdf） getFileAndDownload(fileName, url) { var x = new XMLHttpRequest() x.open('GET', url, true) x.responseType = 'blob' x.onload = function(e) { var blob = x.response if ('msSaveOrOpenBlob'
vue2 修改删除数组和对象某个属性的方法
zxl_start的博客
04-06 1808
this.set(修改对象或者数组，修改的属性，新值)this.set(修改对象或者数组，修改的属性，新值) this.set(修改对象或者数组，修改的属性，新值)this.delete(删除对象或者数组，删除的属性) 数组还可以用splice splice(索引，修改的个数，新值) Vue.是import Vue from ‘vue’ ...
Element ui 动态增减表单项
zxl_start的博客
12-23 1773
Element ui 动态增减表单项 可以参考Element ui 官网 注意prop值 <el-form :inline="true" class="demo-form-inline" ref="orRuleForm" :model="orRuleForm" label-width="100px" > <div v-for="(every, index) in orRuleFor
前端 window.open()打开链接（16:9）（相对于32:9的大屏）
zxl_start的博客
04-21 1752
前端 window.open()打开链接（16:9）（相对于32:9的大屏）（打开浏览器） let strWindowFeatures = `width=1920,height=1080,left=${window.outerWidth / 4},menubar=yes,location=yes,resizable=yes,scrollbars=true,status=true` window.open(v.url, 'newWindow', strWindowFeat
table表格超出高度自动滚动
zxl_start的博客
12-13 1659
超出高度滚动 <div class="response_action response_action_scroll" @mouseover="mouseOverHandler" @mouseout="mouseoutHandler"> // 内容区 </div> data() { return { activeInterval: null, netCarCurrentScollTop: 0, } } methods: {
el-tooltip提示框加复制功能
zxl_start的博客
09-30 1494
el-tooltip提示框加复制功能（不需插件） <el-tooltip placement="top-start" :open-delay="300" effect="dark"> <div slot="content" style="max-width: 800px; max-height: 160px; overflow:auto;"> <span style="back
Elementui el-tree 中英文过滤以及搜索到父子显示子节点，搜索到子节点显示父节点(filter-node-method)
zxl_start的博客
01-17 1299
在项目中，会遇到树节点的搜索，中文和英文搜索，以及搜索到父节点匹配的时候同步显示该父节点下所有的子节点，搜索到子节点匹配的时候同步显示该子节点的父节点。话不多说，以下是代码： 首先是组件部分: <template> <el-popover placement="bottom-start" trigger="click" style="width:100%;" v-model="cdListVisible"> 　　<el-tree :data="cdList" :props="{
Sortable.js板块拖拽示例
最新发布
w11111xxxl的博客
07-14 761
ghostClass: 'blue-background-class' // 拖动时元素的样式类。group: 'shared', // 允许与其它具有相同组名的元素交互。-- 引入 Sortable.js 的 CSS 和 JS 文件 -->width: 150px;/* 减少宽度 */height: 70px;/* 设置高度 */-- 引入 Sortable.js 的 JS 文件 -->animation: 150, // 动画速度。// 初始化 Sortable。
pandas互换两列数据
04-29
这段代码将创建一个具有两列数据（列A和列B）的DataFrame，并通过使用切片语法来交换这两列。在这个例子中，我们只是打印了原始和交换后的DataFrame，但你可以将它们写入到文件、输出到屏幕或以任何其他方式处理。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值