js实现树状结构数据转换为一维数组

最新推荐文章于 2024-01-31 08:15:00 发布

小马的马~

最新推荐文章于 2024-01-31 08:15:00 发布

阅读量481

点赞数

文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/halouKti/article/details/129257827

版权

文章讲述了在使用ElementUI组件时，如何处理后端返回的树状结构数据，以便将其适配到组件中进行显示。通过编写一个名为getData的递归函数，将多级数据转换成一维数组newArr，使得每个元素包含所有层级的ID。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

**在使用element ui中的组件时后端返回来的数据是树状结构数据不能直接在组件中回显所以要把返回的数据转换一下

返回的数据结构

let cateItems = [
            {
                id: 1050,
                title: '小明',
                cateItems: [
                    {
                        id: 1051,
                        title: "小红",
                        cateItems: [
                            { id: 1053, title: '小白' },
                            { id: 1052, title: '小绿' },
                        ]
                    }
                ]
            }
        ]

转换后

  let newArr = []
        let index = 0
        let arr1 = []
        let arr2 = []
        let arr3 = []
        function getData(data) {
            index++
            for (let i = 0; i < data.length; i++) {
                if (index == 1) {
                    arr1.push(data[i].id)
                } else if (index == 2) {
                    arr2.push(data[i].id)
                } else {
                    arr3.push(data[i].id)
                }
                if (data[i].cateItems && data[i].cateItems.length > 0) {
                    getData(data[i].cateItems)
                }
            }


        }
        getData(cateItems)
        for (let i = 0; i < arr3.length; i++) {
            newArr.push(`${arr1[0]},${arr2[0]},${arr3[i]}`)
        }