uniapp自定义多列选择器省市两级联动

背景

这次项目有一个需求是实现省市的选择联动，可是uniapp官方提供的组件默认是省市区三级的。所以我打算自己模仿uniapp提供的多列选择器写一个符合项目需求的选择器

解决过程

首先这肯定是一个多列选择器

range

在这里可以看到，多列选择器中的数据是放在 range 中的，它是一个二维数组，长度表示列数，每一项表示每一列的数据。
所以我要把省市处理成下面这样的：

const a = [['河南省', '山东省'], ['许昌市','郑州市','洛阳市']]

value

value每一项的值，表示了选择range中对应项的第几个
例如，我选择了 河南省许昌市，那么 value 的值就是：0 0

@change

选中事件

columnchange

列选择器滑动的事件

至此，我有了实现的思路

1.找到省市的shuj
2.把省单独放在一个数组中，市放在一个数组中
3.当我滑动到某个省的时候，把市数组换成相应的数据（这一步有坑）
4.选中省市后，要把选中的下标也存一份，方便用户再点进来的时候进行回显

解决方法

1.找到省市数据

2.将省市数据转换为二维数组

getAddressData() {
	const that = this;
	// 所有城市列表,二维数组
	let cityAllList = [];
	// 省列表
	let provinceList = [];
	// address为省市区的json数据
	for (let key in address) {
		let newDataList = [];
		if (address[key].children) {
			for (let key2 in address[key].children) {
				newDataList.push(address[key].children[key2].name);
			}
		}
		provinceList.push(address[key].name);
		cityAllList.push(newDataList);
	}
	that.provinceList = provinceList;
	that.cityAllList = cityAllList;
	that.address = [provinceList, cityAllList[0]];
	//that.address = [provinceList, cityAllList[this.cityList[0]]]; // 考虑回显
},

维护选择器

<view class="cu-form-group">
	<text class="required"></text>
	<view class="title">所在地区</view>
	<picker
		class="pickerS"
		mode="multiSelector"
		@change="selCity"
		@columnchange="selMonitor"
		:value="cityList"
		:range="address"
	>
		<view class="setAns picker" :class="addressNode.province === '请选择城市' ? 'opcity-half':''">
			{{ addressNode.province }} {{ addressNode.city ? ','+ addressNode.city : '' }}
		</view>
	</picker>
</view>

// 监听省市区滚动
selMonitor(e) {
	const that = this
	let column = e.detail.column
	if (column == 0) {
		let index = e.detail.value
		let length = that.address[1].length
		// 改变市
		that.address[1].splice(0,length, ...that.cityAllList[index])
	}
},
// 选择省市
// 获取地址信息
selCity(e) {
	const that = this;
	let val = e.target.value
	this.cityList = val
	that.addressNode = {
		province: that.address[0][this.cityList[0]],
		city: that.address[1][this.cityList[1]]
	}
	console.log(val, that.addressNode, '123123123123123')
}

考虑回显

在onLoad中，获取用户上次选中的 value 数组，并且存起来

在执行省市转换数组时，初始化的时候，将市数据列指定为上次选中的列

that.address = [provinceList, cityAllList[this.cityList[0]]]; //this.cityList保存的是上次用户选择的value数组

至此，就完成了工作

效果