uniapp(uni-app)picker组件使用，自定义三列数据，三级联动，开箱即用

uniapp(uni-app)picker组件使用，自定义三列数据，三级联动，开箱即用（点关注，不迷路）

一、不用安装导入，直接复制粘贴代码即可

二、废话不说，直接上代码

1. 模板代码

<template>
	<view>
	<view class="uni-list-cell-db"
		style="margin-left:10px;width:95%;height: 40px;line-height:40px;border: 1px solid #aaa5;border-radius: 5px;font-size12px;text-align:center;">
		<picker  mode="multiSelector" @columnchange="bindMultiPickerColumnChange" :value="multiIndex"
			@change="changePicker" :range="multiArray">
			<view class="uni-input">
				<!-- 第一列+第二列+第三列显示的数据 -->
				{{multiArray[0][multiIndex[0]]}}{{multiArray[1][multiIndex[1]]}}{{multiArray[2][multiIndex[2]]}}
			</view>
		</picker>
	</view>		
	</view>
</template>

2. js代码

<script>
	export default {
		data() {
			return {
				multiArray: [//现实的内容
					[],
					[],
					[]
				],
				multiIndex: [0, 0, 0],//显示的下标
				listData:[
						  {
							"shortCode": "622921100",
							"regionName": "乡镇1",
							"children": [
							  {
								"shortCode": "622921100001",
								"regionName": "乡镇1居委会1",
								"children": [
								  {
									"shortCode": "622921100001001",
									"regionName": "11社区1",
									"pshortCode": "622921100001"
								  },
								  {
									"shortCode": "622921100001001",
									"regionName": "社区2",
									"pshortCode": "622921100001"
								  }
								],
								"pshortCode": "622921100"
							  },
							  {
								"shortCode": "622921100001",
								"regionName": "乡镇1居委会2",
								"children": [
								  {
									"shortCode": "622921100001001",
									"regionName": "社区1",
									"pshortCode": "622921100001"
								  },
								  {
									"shortCode": "622921100001001",
									"regionName": "社区2",
									"pshortCode": "622921100001"
								  }
								],
								"pshortCode": "622921100"
							  }
							],
							"pshortCode": "622921"
						  },
						  {
							"shortCode": "622921100",
							"regionName": "乡镇2",
							"children": [
							  {
								"shortCode": "622921100001",
								"regionName": "乡镇2居委会1",
								"children": [
								  {
									"shortCode": "622921100001001",
									"regionName": "社区1",
									"pshortCode": "622921100001"
								  },
								  {
									"shortCode": "622921100001001",
									"regionName": "社区2",
									"pshortCode": "622921100001"
								  }
								],
								"pshortCode": "622921100"
							  },
							  {
								"shortCode": "622921100001",
								"regionName": "乡镇2居委会2",
								"children": [
								  {
									"shortCode": "622921100001001",
									"regionName": "社区2",
									"pshortCode": "622921100001"
								  },
								  {
									"shortCode": "622921100001001",
									"regionName": "社区2",
									"pshortCode": "622921100001"
								  }
								],
								"pshortCode": "622921100"
							  }
							],
							"pshortCode": "622921"
						  },
						  {
							"shortCode": "622921100",
							"regionName": "乡镇3",
							"children": [
							  {
								"shortCode": "622921100001",
								"regionName": "乡镇3居委会1",
								"children": [
								  {
									"shortCode": "622921100001001",
									"regionName": "社区1",
									"pshortCode": "622921100001"
								  },
								  {
									"shortCode": "622921100001001",
									"regionName": "社区2",
									"pshortCode": "622921100001"
								  }
								],
								"pshortCode": "622921100"
							  },
							  {
								"shortCode": "622921100001",
								"regionName": "乡镇居委会2",
								"children": [
								  {
									"shortCode": "622921100001001",
									"regionName": "社区1",
									"pshortCode": "622921100001"
								  },
								  {
									"shortCode": "622921100001001",
									"regionName": "社区2",
									"pshortCode": "622921100001"
								  }
								],
								"pshortCode": "622921100"
							  }
							],
							"pshortCode": "622921"
						  }
						]
				}
		}
		methods: {
			//点击完成
		changePicker() {
			this.getAllData()
		},
		//递归查询id
		findRegionByRegionName(data, regionName) {
			for (let i = 0; i < data.length; i++) {
				const region = data[i];
				if (region.regionName === regionName) {
					return region;
				}
				if (region.children) {
					const foundRegion = this.findRegionByRegionName(region.children, regionName);
					if (foundRegion) {
						return foundRegion;
					}
				}
			}
			return null;
		},
		//处理数据为目标格式
		processing(one, two) {
			this.multiArray[0] = this.listData.map(item => item.regionName)
			this.multiArray[1] = this.listData[one].children.map(item => item.regionName)
			this.multiArray[2] = this.listData[one].children[two].children.map(item => item.regionName)
		},
		//picker滑动改变时触发
		bindMultiPickerColumnChange(e) {
			// console.log('第几列：' + e.detail.column + '，下标值为：' + e.detail.value)
			this.multiIndex[e.detail.column] = e.detail.value ? e.detail.value : 0
			// console.log(this.multiIndex)
			switch (e.detail.column) {
				case 0: //拖动第1列
					switch (this.multiIndex[0]) {
						case 0:
							this.multiArray[1] = this.multiArray[1]
							this.multiArray[2] = this.multiArray[2]
							break
						case 1:
							this.multiArray[1] = this.multiArray[1]
							this.multiArray[2] = this.multiArray[2]
							break
					}
					this.multiIndex.splice(1, 1, 0)
					this.multiIndex.splice(2, 1, 0)
					this.processing(this.multiIndex[0], this.multiIndex[1])
					break
				case 1: //拖动第2列
					switch (this.multiIndex[0]) { //判断第一列是什么
						case 0:
							switch (this.multiIndex[1]) {
								case 0:
									this.multiArray[2] = this.multiArray[2]
									break
								case 1:
									this.multiArray[2] = this.multiArray[2]
									break
							}
							break
						case 1:
							switch (this.multiIndex[1]) {
								case 0:
									this.multiArray[2] = this.multiArray[2]
									break
								case 1:
									this.multiArray[2] = this.multiArray[2]
									break
							}
							break
					}
					this.multiIndex.splice(2, 1, 0)
					break
			}
			this.processing(this.multiIndex[0], this.multiIndex[1])//重新设置显示数据
			var id = this.findRegionByRegionName(this.listData, this.multiArray[2][this.multiIndex[2]]);//获取id
			this.shortCode = id.shortCode//获取数据shortCode
			console.log(this.shortCode)
		},
		},
	}
</script>

注意：肯定需要改改才能用啊，哪有那么合适的，但是主要功能都有了，还怕啥，要是有啥问题随时评论区问