基于mpvue的 小程序省市二级Picker选择器
2018-05-31 本文已影响0人
_执着执着再执着
不废话，现有需求小程序 省市 二级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中市对应的数组，如图：
详细解释见图
