[JavaScript知识库]uniapp实现三级联动

<template>
	<picker-view indicator-style="height: 50px;" class="picker-view" @change="change">
		<picker-view-column>
			<view class="item" v-for="(item,index) in provinceData" :key="index">
				{{item.label}}
			</view>
		</picker-view-column>
		<picker-view-column>
			<view class="item" v-for="(item,index) in citys[current]" :key="index">
				{{item.label}}
			</view>
		</picker-view-column>
		<picker-view-column>
			<view class="item" v-for="(item,index) in area[current][current1]" :key="index">
				{{item.label}}
			</view>
		</picker-view-column>
	</picker-view>
</template>

<script>
	import provinceData from './province.js'
	import citys from './city.js'
	import area from './area.js'
	export default {
		data() {
			return {
				provinceData: [],
				citys: [],
				area: [],
				current: 0,
				current1: 0,
				current2: 0
			}
		},
		onLoad() {
			this.provinceData = provinceData
			this.citys = citys
			this.area = area
		},
		methods: {
			change(e) {
				console.log(e);
				let {
					value
				} = e.detail
				this.current = value[0] || 0
				this.current1 = value[1] || 0
				this.current2 = value[2] || 0
			}
		}
	}
</script>

<style>
	.picker-view {
		width: 750rpx;
		height: 600rpx;
		margin-top: 20rpx;
	}
	.item {
		height: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
</style>