前端省市县下拉框渲染方案

全国行政区的行政区代码信息可以在这个地址获取, 会定时更新
https://github.com/modood/Administrative-divisions-of-China

各级别行政区范围数据
https://github.com/xiangyuecn/AreaCity-JsSpider-StatsGov
完整的行政区总共有五级: 省、 市、 县、 乡、 村。日常项目中用到的一般只要省市县三级

中国行政区代码的特点

代码从左至右的含义是:
第一、二位表示省级(含省、自治区、直辖市、特别行政区)。
第三、四位表示地级(含省辖行政区、地级市、自治州、地区、盟及中央直辖市所属市辖区和县的汇总码和省或自治区直辖县级行政区划汇总码)。其中,01-20,51-70表示省直辖市;21-50表示地区(自治州、盟)。90表示省或自治区直辖县级行政区划汇总码
第五、六位表示县级(市辖区、县级市、旗)。01-20表示市辖区或地区(自治州、盟)辖县级市;21-70表示县(旗);81-99表示省直辖县级市;71-80表示工业园区或者经济开发区。
第七至九位表示乡、镇(街道办事处)。其中000-099表示街道办事处,100-199表示镇,200-299表示乡,400-479表示林场、牧场、科技城、园区,480-499表示林业管理局,500-579表示农场、团,580-599表示畜牧场。
为了更详细地反映乡镇以下区划情况,国家统计局补充了三位表示居委会、村委会的代码。

渲染

这里使用vue+elementUI,采用Cascader 级联选择器渲染
数据可以直接在前端写死,总共100k左右,也可以调用行政区服务获取行政区
注意:
Cascader 的回显数据格式是一个数组包数组的形式, 比如

[
	["11", "11000", "1100010"],
	["12", "1200", "120001"]
]
posted @ 2022-03-20 19:31  iminifly  阅读(360)  评论(0编辑  收藏  举报