uniapp picker实现省市二级级联和省市区三级级联

接口返回值格式：

二级级联-vue2

				
					{{title}}
				

export default {
		data() {
			return {
				index: [0, 0],
				array: [
					[],
					[]
				],
				childArr: [], // 二级分类数据源
				title: '请选择'
				}
			}
		}

	//籍贯二级列表处理
			// 获取二级分类
			columnchange(e) {
				// 当滚动切换一级分类时，为当前的一级分类添加它的子类
				if (e.detail.column == 0) {
					// #ifdef H5
					// 在小程序中直接赋值无效  H5 可直接赋值
					this.array[1] = this.childArr[e.detail.value]
					// #endif
					// #ifdef MP-WEIXIN
					// 在 H5 环境下 $set 会导致一级分类无法滚动， 小程序正常运行
					this.$set(this.array, 1, this.childArr[e.detail.value])
					// #endif
				}
			},

			// 选择籍贯
			bindPickerChange(e) {
				console.log('picker发送选择改变，携带值为', e)

				let selectValue = e.detail.value;

				if (this.array[0].length != 0) {
					this.title = this.array[0][selectValue[0]].label

					// 只传市一级的id
					this.personData.native_place = this.array[0][selectValue[0]].value
				};
				if (this.array[1].length != 0) {
					this.title += ',' + this.array[1][selectValue[1]].label
					this.personData.native_place = this.array[1][selectValue[1]].value
				}

			},

			// 获取籍贯
			async getNativePlace() {
			//获取接口数据
				const {
					data
				} = await GetNativePlace()
				// 一级分类的数据源
				this.array[0] = data
				// 将数据源中的二级分类 push 进 childArr，作为二级分类的数据源
				this.childArr = data.map((item) => item.children)
				// 第一次打开时，默认给一级分类添加它的二级分类
				this.array[1] = this.childArr[0]
			},

三级级联-vue3

					
						
							{{pageData.addressName}}
						
					

	const pageData = reactive({
		oldAddressList: [],
		newAddressList: [
			[0],
			[0],
			[0]
		],
		multiIndex: [0, 0, 0],
		addressName: '请选择',
	})

	//获取省市区
	const getProvinceEtc = async () => {
	//获取接口数据
		const res = await uni.$http.post('/api/common/getCity')
		pageData.oldAddressList = res.data.data;
		initAddress();
	}
	getProvinceEtc()

	function initAddress() {
		pageData.newAddressList[0] = pageData.oldAddressList.map((item, index) => {
			// console.log('item:',item);
			var obj = {
				label: item.label,
				value: item.value
			}
			return obj
		})
		pageData.newAddressList[1] = pageData.oldAddressList[pageData.multiIndex[0]].children.map((item, index) => {
			// console.log('item:',item);
			var obj = {
				label: item.label,
				value: item.value
			}
			return obj
		})
		pageData.newAddressList[2] = pageData.oldAddressList[pageData.multiIndex[0]].children[pageData.multiIndex[1]]
			.children.map((
				item, index) => {
				// console.log('item:',item);
				var obj = {
					label: item.label,
					value: item.value
				}
				return obj
			})

		// console.log('this.newAddressList:', pageData.newAddressList);
	}

	//变更选择
	function pickerChange(e) {
		// console.log('pickerChange:', e.detail);
		// console.log(pageData.newAddressList[2][e.detail.value[2]]);
		// console.log(pageData.newAddressList[2][e.detail.value[2]].value);
		pageData.addData.area_id = pageData.newAddressList[2][e.detail.value[2]].value;
		pageData.addressName = pageData.newAddressList[0][pageData.multiIndex[0]].label + '-' + pageData.newAddressList[1][
			pageData.multiIndex[1]
		].label + '-' + pageData.newAddressList[2][pageData.multiIndex[2]].label

	}

	function pickerColumnchange(e) {
		// console.log('pickerColumnchange:', e);
		// 第几列滑动
		// console.log(e.detail.column);
		// 第几列滑动的下标
		// console.log(e.detail.value)
		// 第一列滑动
		if (e.detail.column === 0) {
			pageData.multiIndex[0] = e.detail.value;

			pageData.newAddressList[1] = pageData.oldAddressList[pageData.multiIndex[0]].children.map((item, index) => {
				// console.log('item:',item);
				var obj = {
					label: item.label,
					value: item.value
				}
				return obj
			})
			pageData.newAddressList[2] = pageData.oldAddressList[pageData.multiIndex[0]].children[pageData.multiIndex[1]]
				.children.map(
					(item, index) => {
						// console.log('item:',item);
						var obj = {
							label: item.label,
							value: item.value
						}
						return obj
					})

			pageData.multiIndex.splice(1, 1, 0)
			pageData.multiIndex.splice(2, 1, 0)
		}
		if (e.detail.column === 1) {
			pageData.multiIndex[1] = e.detail.value
			pageData.newAddressList[2] = pageData.oldAddressList[pageData.multiIndex[0]].children[pageData.multiIndex[1]]
				.children.map(
					(item, index) => {
						// console.log('item:',item);
						var obj = {
							label: item.label,
							value: item.value
						}
						return obj
					})

			// 第二列 滑动 第三列 变成第一个
			pageData.multiIndex.splice(2, 1, 0)
		}
		if (e.detail.column === 2) {
			pageData.multiIndex[2] = e.detail.value
		}
	}