建站
咨询
售后
建站咨询
vue+elementUI实现省市县三级联动的方法示例
本文介绍了vue + elementUI实现省市县三级联动的方法示例，分享给大家，具体如下：
成都创新互联公司网络公司拥有十余年的成都网站开发建设经验，1000+客户的共同信赖。提供网站设计、做网站、网站开发、网站定制、卖链接、建网站、网站搭建、成都响应式网站建设公司、网页设计师打造企业风格，提供周到的售前咨询和贴心的售后服务
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、创建一个组件开始写代码
总结：整个过程很简单，就是在选中省的时候获取他的所有children节点数据（市）在选择市的时候获取她的所有children节点数据（区县）
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。
网站题目：vue+elementUI实现省市县三级联动的方法示例
当前路径：http://scyingshan.cn/article/gogsjj.html
