当前位置:首页 > 经验笔记 > javascript > 正文内容

js遍历树,多层嵌,递归循环 elementUI Cascader 级联选择器数据结构拼接

han32685年前 (2020-07-22)javascript4370

目的:后端传入数据和elementUI Cascader组件使用数据不一致 ,树形结构未知层级

原始数据

{
    "success":true,
    "code":10000,
    "message":"操作成功",
    "data":[
        {
            "areaId":"5f1008db4ca4a50bb9934135",
            "areaName":"全部",
            "parentId":"0",
            "capitalInfoDtos":[
                {
                    "capitalInfoId":"5efc06907658036fdc8fe492",
                    "capitalInfoName":"设备123"
                },
                {
                    "capitalInfoId":"5efda5434090f47254c8aa23",
                    "capitalInfoName":"aaa"
                },
                {
                    "capitalInfoId":"5efdac804090f47254c8aa25",
                    "capitalInfoName":"123"
                },
                {
                    "capitalInfoId":"5efdb1b5d83a8d26e7975ec9",
                    "capitalInfoName":"设备111"
                }],
            "companyAreasDtos":[
                {
                    "areaId":"5f1008db4ca4a50bb9934136",
                    "areaName":"东厂",
                    "parentId":"5f1008db4ca4a50bb9934135",
                    "capitalInfoDtos":[
                        {
                            "capitalInfoId":"5efda5434090f47254c8aa23",
                            "capitalInfoName":"aaa"
                        }],
                    "companyAreasDtos":[
                        {
                            "areaId":"5f1008db4ca4a50bb9934137",
                            "areaName":"东厂一车间",
                            "parentId":"5f1008db4ca4a50bb9934136",
                            "capitalInfoDtos":[
                                {
                                    "capitalInfoId":"5efda5434090f47254c8aa23",
                                    "capitalInfoName":"aaa"
                                }],
                            "companyAreasDtos":null
                        }]
                },
                {
                    "areaId":"5f1008db4ca4a50bb9934138",
                    "areaName":"西厂",
                    "parentId":"5f1008db4ca4a50bb9934135",
                    "capitalInfoDtos":[
                        {
                            "capitalInfoId":"5efc06907658036fdc8fe492",
                            "capitalInfoName":"设备123"
                        },
                        {
                            "capitalInfoId":"5efdac804090f47254c8aa25",
                            "capitalInfoName":"123"
                        },
                        {
                            "capitalInfoId":"5efdb1b5d83a8d26e7975ec9",
                            "capitalInfoName":"设备111"
                        }],
                    "companyAreasDtos":[
                        {
                            "areaId":"5f1643da4257577502c5396f",
                            "areaName":"西厂一车间",
                            "parentId":"5f1008db4ca4a50bb9934138",
                            "capitalInfoDtos":[
                                {
                                    "capitalInfoId":"5efc06907658036fdc8fe492",
                                    "capitalInfoName":"设备123"
                                },
                                {
                                    "capitalInfoId":"5efdac804090f47254c8aa25",
                                    "capitalInfoName":"123"
                                },
                                {
                                    "capitalInfoId":"5efdb1b5d83a8d26e7975ec9",
                                    "capitalInfoName":"设备111"
                                }],
                            "companyAreasDtos":null
                        }]
                }]
        }]
}

cascader需要的数据

            optionss: [
                {
                    value: 'zhinan',
                    label: '指南',
                    children: [
                        {
                            value: 'shejiyuanze',
                            label: '设计原则',
                            children: [
                                {
                                    value: 'yizhi',
                                    label: '一致'
                                },
                                {
                                    value: 'fankui',
                                    label: '反馈'
                                },
                                {
                                    value: 'xiaolv',
                                    label: '效率'
                                },
                                {
                                    value: 'kekong',
                                    label: '可控'
                                }
                            ]
                        },
                        {
                            value: 'daohang',
                            label: '导航',
                            children: [
                                {
                                    value: 'cexiangdaohang',
                                    label: '侧向导航'
                                },
                                {
                                    value: 'dingbudaohang',
                                    label: '顶部导航'
                                }
                            ]
                        }
                    ]
                }
            ],

不知道层级for遍历不适用

递归循环


//因为第一级单独需要使用所以单独梯出处理
                        // 全部 设备  一级
                    var temporaryArr ={}
                    temporaryArr.value = res.data[0].areaId
                    temporaryArr.label = res.data[0].areaName
                    temporaryArr.children = []
                    for (const iterator of res.data[0].capitalInfoDtos) {
                        temporaryArr.children.push({
                            value: iterator.capitalInfoId,
                            label: '设备:'+iterator.capitalInfoName
                        })
                    }

                    this.optionss = res.data[0].companyAreasDtos
                    this.tortoise(this.optionss)
                    this.optionss.unshift(temporaryArr)
                    
    
    
    
        //递归数
        tortoise(dataArr){
            for (var i in dataArr) {
                // var temporaryArr ={}
                dataArr[i].value = dataArr[i].areaId
                dataArr[i].label = dataArr[i].areaName
                delete dataArr[i].areaName
                delete dataArr[i].parentId
              
                if(dataArr[i].companyAreasDtos){//判断是否有下级
                    delete dataArr[i].capitalInfoDtos
                    dataArr[i].children =  dataArr[i].companyAreasDtos
                    delete dataArr[i].companyAreasDtos
                    this.tortoise(dataArr[i].children)
                }else{

                    dataArr[i].children =  []
                    for (const item of dataArr[i].capitalInfoDtos) {
                        dataArr[i].children.push({
                            value:item.capitalInfoId,
                            label:'设备:'+item.capitalInfoName
                        })
                    }
                    delete dataArr[i].capitalInfoDtos
                }
            }
            // console.log(dataArr)
        },

最后效果

image.png

image.png





扫描二维码推送至手机访问。

版权声明:本文由瀚文博客发布,如需转载请注明出处。

本文链接:https://hanwenblog.com/post/17.html

分享给朋友:

相关文章

JS/VUE按钮点击上传文件

直接上代码    importFile() {       const fil...

JS/VUE按钮点击excel上传文件解析文件内容

代码如示    import * as XLSX from 'xlsx'; // 导入xlsx库    ...

layer弹层遮罩挡住窗体解决,解决layer弹层遮罩挡住窗体的问题

layer弹层遮罩挡住窗体解决,解决layer弹层遮罩挡住窗体的问题

上代码<div>     <div>这里面某个按钮触发弹层<div>     &...

树形结构(tree)和扁平数组(list)的相互转换

项目中很多地方需要用到树形结构表格等,因此自己封了个VUE的树和表格组件,需要经常对两种形式的数据进行相互转换,这里记录下转换的方法扁平数组转换为树形结构这个是最常用的,当我们从后台获取一个扁平数组的...

TypeError: Cannot read properties of undefined (reading 'utils')

解决XLSX 导出报错把import XLSX from 'xlsx'变成import * as XLSX fro...