【完整代码】uni-app原生picker实现地址选择器

Chrome运行效果如下：

QQ录屏20230505104210

父组件：

<template>
	<view>
		<address-picker @change="change">
			<view class="word">{
  {address}}</view>
			<view class="word" slot="province">{
  {list[0]==""?"未选择":list[0]}}</view>
			<view class="word" slot="city">{
  {list[1]==""?"未选择":list[1]}}</view>
			<view class="word" slot="area">{
  {list[2]==""?"未选择":list[2]}}</view>
		</address-picker>
	</view>
</template>

<script>
	import addressPicker from './components/addressPicker.vue'
	export default {
		components: {
			addressPicker
		},
		data() {
			return {
				address: "选择地址",
				list: ["", "", ""]
			}
		},
		onLoad() {

		},
		methods: {
			change(selectValue) {
				this.address = selectValue.join("")
				this.list = selectValue
			}
		}
	}
</script>

<style lang="scss" scoped>
	.word {
		width: 750rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		font-size: 28rpx;
	}
</style>

子组件：

<template>
	<view>
		<picker @change="confirm" @columnchange="columnchange" :range="array" range-key="name" :value="value"
			mode="multiSelector">
			<slot></slot>
			<slot name="province"></slot>
			<slot name="city"></slot>
			<slot name="area"></slot>
		</picker>
	</view>
</template>

<script>
	import allAddress from '../js/address.js' //引入总数据库//
	export default {
		data() {
			return {
				array: [], //选择器的源数据//
				allarray: allAddress, //总数据库//
				value: [0, 0, 0], //索引值//
				selectValue: ["", "", ""] //选中的数据//
			}
		},
		created() {
			this.init()
		},
		methods: {
			//组件初始化//
			init() {
				this.updateArray()
					.updateSelectArray()
					.$forceUpdate() //强制刷新//
			},
			//更新源数据//
			updateArray() {