葵青区(香港最便宜二手房出售信息)


需求:后台管理系统中店铺信息修改及新增店铺信息中要用到地址三级联动,在vue中没找到合适的案例,在elementUI中也没有直接可以用的组件,就找了一个组件,自己修改了一下,可以直接在项目中使用。主要实现了省市区三级联动在不同情况下的正常使用。

思路:新增信息中要用到三级联动的话,只要考虑三级联动之间的联动及数据的存储即可,涉及到修改的话还要考虑到默认值的问题。后面会有详细的说明

实现:

三级联动首先需要一个省市信息的数据源。在这里,在线获取一个数据,并将其存储在资产下的json文件夹中(应该可以将其存储在公共文件夹和静态文件夹中)

image.png

{ " : "北京"," : "北京"," : "东城区"," : "西城区"," : "朝阳区"," : "丰台区"," : "顺义区,昌平区,大兴区,怀柔区,平谷区,密云区, "鹿泉区","栾城区" : ","井陉县" : ","正定县" : ","行唐县","灵寿县" : ","元氏县:昭县:辛集市:金州市:唐山市: "肥乡区","永年区","临漳县" : ","成安县" : ","大明县" : ","歙县" : ","潍县" : ","衢州县" : ","武安市","邢台市" : ","桥东区","" :沙河市:保定市:京秀区:莲池区:满城区:清远区:高阳县:荣成县:涞源县:望都县:安新县:易县