• 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就是我们要的处理后的数据。
    至此,完毕~

  • 相关阅读:
    目录结构
    RabbitMQ 将监听的IP从localhost修改为指定IP
    概念
    RabbitMQ 基础概念
    修改shell提示符的显示格式
    VIM常用设置
    RabbitMQ 开启WEB管理
    用pecl/pear独立编译PHP扩展 vs. 把扩展编译到PHP内核中
    安装composer
    安装php-amqplib(RabbitMQ的phpAPI)
  • 原文地址:https://www.cnblogs.com/adjk/p/10836798.html
Copyright © 2020-2023  润新知