基于mpvue的 小程序省市二级Picker选择器

不废话，现有需求小程序 省市 二级picker选择器

---

由于本人用的mpvue进行开发小程序，mpvue的特性基本与vue保持一致，有兴趣的可以自行了解。先展示下效果图：

触发picker时

选择省份时联动

因为mpvue中支持小程序原生组件，这里我用的是微信官方picker，如代码（此处代码无法粘贴，直接上代码贴图）

html代码如图

解释下：bindchange得写成@change格式，当picker点击确定时触发。bindcolumnchange写成@columnchange，当选择picker中的省份或市时触发。

最重要的是此处的几个数组，主要思想类似后台根据某id查询另一个表中的id等于这个id的所有数据，再赋给空数组，显示在picker中，如图：

类似后台多表关联

数据哪里来？都是我本地json数据格式，数据格式如图（最后附上省市数据福建）：

我们需要拿到省和市

对数据进行处理：

数据处理如图

最后我们需要做的就是，当选择picker中省份时，根据当前省份的id和市的id对应起来，当市的id等于省份id，就将市加入到空数组，并赋值给picker中市对应的数组，如图：

详细解释见图

结束语：看过官方文档，解释很模糊，看过网上其他人分享的方法，比较麻烦，本人理解能力有限，无法攻克，随即自己想办法写出这个二级picker，此二级picker不仅可用于省市选择，稍加改造也可用于其他二级picker。

这个方法不是最简单的，但很容易理解。还有很多可以优化的地方，欢迎指出，共同进步！

最后的最后，需要city的json数据，百度云地址如下：

链接:https://pan.baidu.com/s/1YYFq5aot0SqEkjZkX2piog 密码:if0y