v-region 1.8.1 发布，基于 Vue2 的中国行政区划选择器

[Terry05]

1.8.1 版本发布，更新内容：

• 增加 UI 选择器模式下呼出选择器的默认按钮
• 修复省 /直辖市切换时，城市显示不正确
• 修改 UI 选择器模式在选择完最后一个级别内容时，自动关闭选择器界面
• 下拉菜单容器使用插件 v-dropdown
• 调整图标字体名称，避免与用户环境中的 iconfont 内容冲突
• 完善 i18n 内容

插件简介：

v-region

基于 Vue2 的简洁易用的中国行政区划选择器，包含常规表单下拉列表模式、UI 下拉选择器模式以及选中项目的纯文件展示模式

文档与实例

请访问

• English site
• 国内站点

插件预览

表单下拉列表元素模式

UI 下拉选择器模式

[lpbname777]

好东西啊

[cai314494687]

不错。请教一下，你这个数据来源是哪？

[izoabr]

不错不错，用起来很方便的样子，虽然我不用 Vue

[also24]

每当看到此类控件，我都会顺手测一下 中山 东莞 嘉峪关 三沙 儋州 这五个 “直筒子市” hhhh

[Terry05]

@cai314494687 在插件的 Github 首页上有说明数据源，它是另外独立维护的数据源项目，而这个项目的源数据是来自于民政局、国务院公告、国家统计局

[vincentxue]

支持一发

[jingniao]

@also24 加上 济源……

[also24]

@jingniao #7 济源是省辖县级市，和不设区的地级市还是有点儿区别的。

如果算上济源市，那省直管县估计也要算进去，那就还有：

仙桃市、潜江市、天门市、神农架林区、五指山市、文昌市、琼海市、万宁市、东方市、定安县、屯昌县、澄迈县、临高县、琼中黎族苗族自治县、保亭黎族苗族自治县、白沙黎族自治县、昌江黎族自治县、乐东黎族自治县、陵水黎族自治县、石河子市、阿拉尔市、图木舒克市、五家渠市、北屯市、铁门关市、双河市、可克达拉市、昆玉市

[also24]

既然说起这个了，就顺便提一下详细的建议吧

大部分情况下，可以认为我国存在五级行政区划：
省 -> 市 -> 县 -> 乡 -> 村

每一级又存在部分不同名但同级的单位：直辖市、自治区、县级市、街道 之类的
大部分情况下，我们用到 乡 /镇 /街道 一级，也就是四级区划。

但是实际执行中，存在各种 “特例”，于是就产生了几个警察容易出坑的地方：

1、直辖市辖区虽然行政上属于厅局级，但是行政区划上属于县级，相当于少了一级地级单位
也就是：直辖市 - 空缺地级 - 直辖市辖区 - 直辖市辖区街道
这个不用举例了，四个直辖市都这样

2、省直管县其实是 “正统”，但是由于少了地级市 “代管”，也相当于少了一级地级单位
也就是：省 - 空缺地级 - 省直管县 / 省直管县级市 - 省管县下辖乡镇街道
这个就是我上面举例的一大堆，典型就是济源市

3、全国有五个 “直筒子市”，不设区县，地级市直接管理乡镇街道级别，相当于少了一级县级单位
也就是：省 - 直筒子地级市 - 空缺县级 - 直筒子地级市下辖街道 /镇
这个就是我上面提到的五个城市：中山 东莞 嘉峪关 三沙 儋州

关于这三种特殊情况的处理，可以看到第一种楼主已经处理了，采取的是 city 字段 null 的形式，同时会自动删减一级菜单。
第二第三种应该是没有处理，会导致找不到济源市、以及中山市选不到下级街道的问题。

个人建议为了保证兼容性，应该强行插入一级来保证每个字段都能取到值：

北京市 - 北京市 - 东城区 - 东华门街道 （虚拟地级北京市）
河南省 - 济源市 - 济源市 - 沁园街道 （虚拟地级济源市）
广东省 - 中山市 - 中山市 - 石岐区街道 （虚拟县级中山市）

这样可以保证 city area 字段均有值，方便开发者实现相应逻辑，也解决了删减菜单带来的跳动问题。

如果担心省辖县过多导致臃肿，也可以虚拟一级 “省辖县 /省辖县级市” 来集合：
河南省 - 省辖县 /省辖县级市 - 济源市 - 沁园街道 （虚拟地级 省辖县 /省辖县级市）
但是这样也会带来缺陷，开发者获取 city 字段时获取到的信息会无意义。

参考资料：
https://zhuanlan.zhihu.com/p/31774163

[also24]

错别字： 警察容易出坑 -> 经常容易出坑

[Terry05]

@also24 抱歉这么晚才看到，非常感谢提供了这么详细的意见建议

会认真考虑你的建议，增加虚拟地级市的方式实际上在一定程度上还减少了功能实现的复杂度。不过我第一时间能想到的就是只打开了省级，市级的选择器，能选择的项目只有两个，于是选择了“北京市”，后面市级出现的还是“北京市”，显得略诡异 /怪异，可以想象得到会有人提 issues，市级显示“北京市”有啥意义，就不能去掉吗？

做成 4 级实际上数据量已经挺大的了，5 级不太现实，至少是纯静态数据的方式不太现实，要做到这细粒度，服务端数据模式是唯一的方案，除了一些对于区域信息非常敏感的系统之外，对级别要求这么高的系统通常不多，有明确要求的通常 4 级也已满足；做成那样也显得不够纯粹，不够轻便（目前 4 级实际并不轻），还要导数据到服务端，开放服务端 Service 接口等等的工作

[also24]

@Terry05 #11

其实淘宝目前就是这样做的


京东我印象中以前是这样的，刚才看了下已经不是了


仔细看其实可以看出，京东压根不显示 “省 /市 /区 /县” 的分级，这样就只需要考虑树形结构，不需要考虑区划层级了。

而淘宝 和 v-region，都已经有了区划层级展示，导致不得不给具体的地名一个 “名分”。

淘宝的处理是，四个直辖市虚拟了一级 “市”，但用户选择的时候，会自动选择并跳过。
直筒子市 和 省直管县级市 /省直管县 都展示为 “市” 一级，同时 “区” 无法点击选择。
其实还是略为奇怪的（市一级为什么会混入县）。


参考以上实现，我的建议是：
数据层面上，需要使用虚拟层级的方式，不论 UI 上如何展示，数据方面都通过虚拟一级单位的方式写满字段，不应出现 null 的情况，这样便于开发者做地名判断（开发者可能并不会去关注 北京市 - 济源市 - 中山市 的区别，而希望都能在 city 字段中进行处理）

UI 层面上，我更倾向于淘宝在直辖市上的实现方案，即无论如何都保留四个层级不变，但当该层级是虚拟的，导致只有一个选项的时候，自动帮用户选择，直接进入下一级。

我前面提到五级，只是从行政区划的角度，实际中我感觉基本上只要处理到 县 /镇 /街道办 一级，就可以解决大部分问题了。