前端省市县下拉框渲染方案
全国行政区的行政区代码信息可以在这个地址获取, 会定时更新
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"]
]
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾(3.3-3.9)
· Vue3状态管理终极指南:Pinia保姆级教程