zoukankan      html  css  js  c++  java
  • vue数据处理:把数组处理成适用于tree组件的数据

    例:
    数据处理前:
    [{"id":1,"pid":0,"name":"默认维度","type":"0"},
    {"id":2,"pid":1,"name":"上海科技有限公司","type":"1"},
    {"id":3,"pid":2,"name":"北京科技有限公司","type":"1"},
    {"id":4,"pid":2,"name":"北京科技有限公司","type":"1"},
    {"id":117,"pid":4,"name":"测试部门","type":"2"},
    {"id":5,"pid":2,"name":"徐州科技有限公司","type":"1"},
    {"id":6,"pid":2,"name":"重庆科技有限公司","type":"1"},
    {"id":114,"pid":12,"name":"需求分析师","type":"3"},
    {"id":7,"pid":2,"name":"人力资源部","type":"2"},
    {"id":100,"pid":7,"name":"修改岗位测试3","type":"3"},
    {"id":101,"pid":7,"name":"添加岗位测试","type":"3"},
    {"id":102,"pid":7,"name":"添加岗位测试2","type":"3"},
    {"id":103,"pid":8,"name":"java开发","type":"3"},
    {"id":107,"pid":7,"name":"HR","type":"3"},
    {"id":8,"pid":2,"name":"产品研发部","type":"2"},
    {"id":10,"pid":8,"name":"统一岗位","type":"3"},
    {"id":9,"pid":2,"name":"销售部","type":"2"},
    {"id":108,"pid":9,"name":"销售顾问","type":"3"},
    {"id":11,"pid":2,"name":"深圳科技有限公司","type":"1"},
    {"id":12,"pid":2,"name":"咨询服务部","type":"2"},
    {"id":106,"pid":12,"name":"咨询顾问","type":"3"}]

    数据处理后:
    [
    {"id":1,
    "pid":0,
    "name":"默认维度",
    "type":"0",
    "children":
    [
    {
    "id":2,
    "pid":1,
    "name":"上海科技有限公司",
    "type":"1",
    "children":
    [
    {
    "id":3,
    "pid":2,
    "name":"北京科技有限公司",
    "type":"1",
    "children":[]
    },
    {
    "id":4,
    "pid":2,
    "name":"北京科技有限公司",
    "type":"1",
    "children": [
    {"id":117,"pid":4,"name":"测试部门","type":"2","children":[]}]},
    {"id":5,"pid":2,"name":"徐州科技有限公司","type":"1","children":[]},
    {"id":6,"pid":2,"name":"重庆科技有限公司","type":"1","children":[]},
    {"id":7,"pid":2,"name":"人力资源部","type":"2","children":[{"id":100,"pid":7,"name":"修改岗位测试3","type":"3","children":[]},
    {"id":101,"pid":7,"name":"添加岗位测试","type":"3","children":[]},
    {"id":102,"pid":7,"name":"添加岗位测试2","type":"3","children":[]},
    {"id":107,"pid":7,"name":"HR","type":"3","children":[]}]},
    {"id":8,"pid":2,"name":"产品研发部","type":"2","children":[{"id":103,"pid":8,"name":"java开发","type":"3","children":[]},
    {"id":10,"pid":8,"name":"统一岗位","type":"3","children":[]}]},
    {"id":9,"pid":2,"name":"销售部","type":"2","children":[{"id":108,"pid":9,"name":"销售顾问","type":"3","children":[]}]},
    {"id":11,"pid":2,"name":"深圳科技有限公司","type":"1","children":[]},
    {"id":12,"pid":2,"name":"咨询服务部","type":"2","children":[{"id":114,"pid":12,"name":"需求分析师","type":"3","children":[]},
    {"id":106,"pid":12,"name":"咨询顾问","type":"3","children":[]}
    ]
    }
    ]
    }
    ]
    }
    ]

    接下来进行数据处理:
    1.将要处理的数据赋值给content变量,和声明处理后的数据的变量

    let content = `${数据处理前的list}`
    var newlist = []

    2.给每条数据加上children属性

    for (var a = 0; a < content.length; a++) {
    content[a].children = []
    }

    3.拿出最高层级的元素----pid数值最小则层级最高,此处直接取0,省去很多麻烦的数据操作

    for (var b = 0; b < content.length; b++) {
    if (content[b].pid === 0) {
    newlist = content.splice(b, 1)
    }
    }

    4封装递归方法并执行

    function deepSort (list, content) {
    var content1 = []
    for (var m = 0; m < list.length; m++) {
    for (var n = 0; n < content.length; n++) {
    if (list[m].id === content[n].pid) {
    list[m].children.push(content[n])
    } else {
    content1.push(content[n])
    }
    }
    }
    for (var o = 0; o < list.length; o++) {
    deepSort(list[o].children, content1)
    }
    }

    执行:

    deepSort(newlist, content)

    得到的newlist就是我们要的处理后的数据。
    至此,完毕~

  • 相关阅读:
    如何下载、安装、启动WebTours
    Jmeter--录制脚本-用户参数化-添加断言
    UTF-8与GBK的区别
    日志的等级
    程序员与英语
    遇到安装app不识别的情况
    苹果手机怎么追踪定位
    如何制作微信表情
    比美图还要简单的在线photoshop
    Mac 下 搭建 svn 服务器
  • 原文地址:https://www.cnblogs.com/adjk/p/10836798.html
Copyright © 2011-2022 走看看