在微信小程序开发中，`mpvue`框架是一个常用的工具，它允许开发者使用Vue.js语法进行微信小程序的构建。本文将详细介绍如何使用`mpvue`在微信小程序中实现一个自定义的多列选择器，用于省份和城市的选择。
微信小程序提供了一个内置的`picker`组件，用于地区选择，其`mode`属性设为`region`即可实现省市区选择。但此组件只能保存名称，不支持保存ID，并且可能不适合所有场景，比如只选择省份和城市，而不涉及区县。因此，我们需要自定义一个`multiSelector`模式的`picker`来满足需求。
城市数据通常以JSON格式存储，例如：
```json
{
"code": 0,
"msg": "success",
"data": [
{
"id": 2,
"name": "北京",
"children": [
{
"id": 36,
"name": "北京市"
}
]
}
]
}
```
在这个例子中，数据结构包括省份（`province`）和城市（`city`），每个都有`id`和`name`属性，其中`children`字段表示该省份下的城市列表。
为了实现自定义的多列选择器，我们需要使用`picker`组件的`mode`属性设为`multiSelector`。以下是一段示例代码：
```html
<picker
mode="multiSelector"
@change="bindCityChange"
@columnchange="bindCityColumnChange"
:value="multiIndex"
:range="multiArray"
range-key="name">
<view class="picker">选择城市{{userInfo.province.name}},{{userInfo.city.name}}</view>
</picker>
```
这里有几个关键点需要注意：
1. 使用`@change`和`@columnchange`而不是`bindchange`和`bindcolumnchange`，这是因为在`mpvue`中事件绑定的写法不同。
2. `value`属性是一个数组，例如`[0, 0]`，表示当前选择的省份和城市的索引。
3. `range`属性同样是一个数组，用于指定`value`数组中的索引值，从0开始。
4. 当数据是对象数组时，`range-key`属性用于指定用于显示的键，如`name`。
5. `@change`事件在选择确认后触发，我们可以通过`e.mp.detail.value`获取选中的索引值。
6. `@columnchange`事件在滚动每一列时触发，可以获取到改变的列（`e.mp.detail.column`）和对应的值（`e.mp.detail.value`）。
在`bindCityChange`方法中，我们可以根据选中的索引获取对应的省份和城市数据，并将其赋值给用户信息对象`userInfo`。
```javascript
bindCityChange(e) {
const {province, city} = this.multiArray.map(arr => arr[e.mp.detail.value[arr.length - 1]]);
this.userInfo.province = province;
this.userInfo.city = city;
}
```
同时，`bindCityColumnChange`方法用于监听列的滚动，当省份改变时，更新城市列表。
```javascript
bindCityColumnChange(e) {
const column = e.mp.detail.column;
if (column === 0) {
// 加载对应省份下的城市数据
this.multiArray[1] = this.cityList[this.multiArray[0][e.mp.detail.value]].children;
}
}
```
通过以上步骤，我们就能够实现一个自定义的省份城市选择器，它不仅能够展示省份和城市名称，还能在选择时保存相应的ID，满足了特定场景的需求。在实际项目中，需要根据实际获取到的省份城市数据进行适配和处理。
