Mpvue微信小程序多列选择器用法：实现省级城市选择

前言

默认情况下，微信小程序为我们提供省级选择器选择器，只需将模式设置为区域。

因为小程序提供的默认城市选择器只能保存名称，不能保存id，而且我不需要选择第三级城市，所以我打算用mode='multiSelector'来实现选择省市

城市数据json格式

关于省级城市数据的获取，这里我通过界面获取数据，返回的json格式为

{'code': 0，'msg':'成功'，'数据': [{'id': 2，'name':'沈阳'，'children': [{'id': 36，'name':'沈阳 City'}]}]}

我们保存提交时只需保存省和城市ID

picker多列选择器的用法选择城市{{userInfo.province.name}},{{userInfo.city.name}}

将选择器模式属性设置为multiSelector

模式='多功能'

1，这里我们需要注意的是，在mpvue中不能直接使用bindchange和bindcolumnchange，而是使用@change和@columnchange这种方式2，value是一个数组，例如我们有两列

[['沈阳'，'湖南']，['沈阳'，'永州']]

3，range也是一个数组，指定索引值的值，下标从0开始，如[0,0] 4，如果我们的数据是二维对象数组，我们可以使用range-key指定Object中键的值作为显示内容的选择器

5.当我们确认选择时，将触发@change事件

//City选择获取所选值[0,0]。请注意，获取值的方法是通过e.mp.detail.value而不是e.detail.value来获取值，而不是e.detail.value bindCityChange（e）{//选择的值index console.log（e.mp.detail.value [0 ]，e.mp.detail.value [1]）; //选择的省和城市数据console.log（this.multiArray [0] [e.mp .detail.value [0]]，this.multiArray [1] [e.mp.detail.value [1]]）; this.userInfo.province=this.multiArray [0] [e.mp.detail.value [0]]; this.userInfo.city=this.multiArray [1] [e.mp.detail.value [1]]; }，

6.当我们滚动每列的值

时，将触发@columnchange事件

7.通过e.mp.detail.column和e.mp.detail.value获取与修改列对应的值

Console.log（'Modified column is'，e.mp.detail.column，'，value is'，e.mp.detail.value）;

通过获取修改后的数据来更新multiIndex的值

//收听滚动事件滚动第一列以修改第二列数据bindCityColumnChange（e）{//更新multiIndex的值this.multiIndex [e.mp.detail.column]=e.mp.detail.value ; //在省号开关下加载相应的City数据（e.mp.detail.column）{case 0: //this.multiArray [1]=this.cityList [e.mp.detail.value] .children; this.multiArray=[this.cityList，this.cityList [e.mp.detail.value] .children];打破; }，data（）{return Phone 软件开发

{multiIndex: [0,0]，multiArray: []，}}

参考阅读

https://www.cnblogs.com/Oopa/p/7266976.htmlhttps://developers.weixin.qq.com/miniprogram/dev/component/picker.html