好资源导航 » 文章资讯 » vue + elementUI实现省市县三级联动的方法示例

vue + elementUI实现省市县三级联动的方法示例

2023-08-10 06:22:07 164

本文介绍了vue+elementUI实现省市县三级联动的方法示例，分享给大家，具体如下：

1、首先需要准备省市县json文件，网上有很多可以下载。项目中使用的city.json数据是这样的格式：

[
{
"value":"110000",
"label":"北京市",
"children":[
{
"value":"110000",
"label":"北京市",
"children":[
{
"value":"110101",
"label":"东城区"
},
{
"value":"110102",
"label":"西城区"
},
{
"value":"110105",
"label":"朝阳区"
},
{
"value":"110106",
"label":"丰台区"
},
{
"value":"110107",
"label":"石景山区"
},
{
"value":"110108",
"label":"海淀区"
},
{
"value":"110109",
"label":"门头沟区"
},
{
"value":"110111",
"label":"房山区"
},
{
"value":"110112",
"label":"通州区"
},
{
"value":"110113",
"label":"顺义区"
},
{
"value":"110114",
"label":"昌平区"
},
{
"value":"110115",
"label":"大兴区"
},
{
"value":"110116",
"label":"怀柔区"
},
{
"value":"110117",
"label":"平谷区"
},
{
"value":"110118",
"label":"密云区"
},
{
"value":"110119",
"label":"延庆区"
}
]
}
]
},
{
"value":"120000",
"label":"天津市",
"children":[
{
"value":"120000",
"label":"天津市",
"children":[
{
"value":"120101",
"label":"和平区"
},
......

2、创建一个组件开始写代码




.linkage{
display:flex;
div{
margin-right:5px;
}
}

总结：整个过程很简单，就是在选中省的时候获取他的所有children节点数据（市）在选择市的时候获取她的所有children节点数据（区县）

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

vue + elementUI实现省市县三级联动的方法示例

热门推荐

随机推荐