uniapp小程序项目省市区选择器

data.js
链接: 百度网盘 请输入提取码百度网盘为您提供文件的网络备份、同步和分享服务。空间大、速度快、安全稳固，支持教育网加速，支持手机端。注册使用百度网盘即可享受免费存储空间https://pan.baidu.com/s/1FlN7qHiiL_NFU94f9nnIYg. 提取码: 95sh

<template>
	<picker @change="bindPickerChange" @columnchange="columnchange" :range="array" range-key="name" :value="value" mode="multiSelector" style="display:flex;justify-content: space-between;">
		<slot></slot>
	</picker>
</template>

<script>
	import AllAddress from './data.js'
	let selectVal = ['','','']
	
	export default {
		data() {
			return{
				value: [0,0,0],
				array: [],
				index: 0
			}
		},
		created() {
			this.initSelect()
		},
		methods:{
			// 初始化地址选项
			initSelect() {
				this.updateSourceDate() // 更新源数据
				.updateAddressDate() // 更新结果数据
				.$forceUpdate()  // 触发双向绑定
			},
			// 地址控件改变控件
			columnchange(d) {
				this.updateSelectIndex(d.detail.column, d.detail.value) // 更新选择索引
				.updateSourceDate() // 更新源数据
				.updateAddressDate() // 更新结果数据
				.$forceUpdate()  // 触发双向绑定
			},
			
			/**
			 * 更新源数据
			 * */
			updateSourceDate() {
				this.array = []
				this.array[0] = AllAddress.map(obj => {
					return {
						name: obj.name
					}
				})
				this.array[1] = AllAddress[this.value[0]].cityList.map(obj => {
					return {
						name: obj.name
					}
				})
				this.array[2] = AllAddress[this.value[0]].cityList[this.value[1]].areaList.map(obj => { 
					return {
						name: obj.name
					}
				})
				return this
			},
			
			/**
			 * 更新索引
			 * */
			updateSelectIndex(column, value){
				let arr = JSON.parse(JSON.stringify(this.value)) 
				arr[column] = value
				if(column === 0 ) {
					arr[1] = 0
					arr[2] = 0
				}
				if(column === 1 ) {
					arr[2] = 0
				}
				this.value = arr
				return this
			},
			
			/**
			 * 更新结果数据 
			 * */
			updateAddressDate() {
				selectVal[0] = this.array[0][this.value[0]].name
				selectVal[1] = this.array[1][this.value[1]].name 
				selectVal[2] = this.array[2][this.value[2]].name 
				return this
			},
			
			/**
			 * 点击确定
			 * */
			bindPickerChange(e) {
				this.$emit('change', {
					index: this.value,
					data: selectVal,
					array:this.array
				})
				return this
			}
			
		}
	}
</script>

<style>
</style>

使用组件的方法：

<template>
	<pickerAddress @change="change">
		{{value}}
	</pickerAddress>
</template>
<script>
	import pickerAddress from './components/pickerAddress/pickerAddress.vue'
export default {
		components: {
			pickerAddress
		},
		data() {
			return {
				value："请选择地区"
			}
		}，
		methods: {
			change(data) {
				this.value = data.data.join('')
			}
		}
}
</script>

复制过来的方便我自己后期使用的  也分享给大家  如有侵权可删除哈 ：）