JavaScript中push()两层循环数据及多层，vue用iview(2.0+)UI 组件库时，制作级联全国地址下拉列表

就像风1样

于 2018-08-31 16:35:54 发布

阅读量1.4k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Vue iview JavaScript vue专栏文章标签： vue JavaScript iviewUI 全国地址级联菜单

本文链接：https://blog.youkuaiyun.com/qq_42221334/article/details/82258365

Vue 同时被 3 个专栏收录

99 篇文章

订阅专栏

vue专栏

78 篇文章

订阅专栏

JavaScript

18 篇文章

订阅专栏

项目要求用iview制作地址下拉框，引用网上找到的全国地址列表。下拉列表需两个名称，给出了实现代码，该方法循环两层，也可自行增加循环层数，还给出了全国城市列表文件的百度网盘链接。

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

项目需求，让用iview制作地址下拉框，在网上找的全国地址列表引用了一下

全国城市列表.js 链接: https://pan.baidu.com/s/1Q0mgXwqMmTrwnUCSxW_R3Q 密码: rivp

但是都知道下拉列表是需要两个名称的，就像下图写的假数据

不废话，直接上代码了，这个方法能我是就循环了两层，还可以循环多层的。。。自己加一下就行！

cityArray 就是引用的全国地址，addressData 就是获得的最终数据结果！

for(var a=0;a<cityArray.length;a++){
        var children =[];
        for(var b=0;b<cityArray[a].child.length;b++){
            children.push({
                value:cityArray[a].child[b].name,
                label:cityArray[a].child[b].name,
            })
        }
        this.addressData.push({
            value:cityArray[a].name,
            label:cityArray[a].name,
            children:children

        })
    }