picker-view 小程序级联选择（三级城市选择）

 

 

<template>
	<view class="picker-wrapper">
		<!-- <view class="uni-padding-wrap">
			<view class="uni-title">当前选择：{{provice}} {{city}} {{area}}</view>
		</view> -->
		<picker-view v-if="visible" :value="value" @change="bindChange"
			class="pickerViewp">
			<picker-view-column>
				<view class="item11" v-for="(item,index) in provices" :key="index">{{item}}</view>
			</picker-view-column>
			<picker-view-column>
				<view class="item" v-for="(item,index) in citys" :key="index">{{item}}</view>
			</picker-view-column>
			<picker-view-column>
				<view class="item" v-for="(item,index) in areas" :key="index">{{item}}</view>
			</picker-view-column>
		</picker-view>
	</view>
	
</template>

<script>
	import { columnsCitys } from '../../utils/commonData.js'
	export default {
		data() {
			return {
				provices:[],
				provice: '河南省',
				city:'郑州市',
				area:'中原区',
				value: [0,0,0],
				visible: true,
				// indicatorStyle: `height:200rpx;color:red`,
				oldArr:[0,0,0],
				firstIndex: 0,
				secondIndex: 0,
				columnsCitys,
			}
		},
		mounted() {
			let arr = '河南省:41,郑州市:4101,中原区:410102'
			this.$emit('getData', arr)
			this.provices = this.columnsCitys.map(item=>{
				return item.text
			})
			
		 },
		computed:{
			citys:function(){
				let arr = this.columnsCitys[this.firstIndex].children.map(item=>{
				return item.text
			})
				return  arr 
			},
			areas:function(){
				let arr =this.columnsCitys[this.firstIndex].children[this.secondIndex].children.map(item=>{
					return item.text
				})
				return  arr 
			}
		},
		methods: {
			bindChange: function(e) {
				this.arr = e.detail.value
				if(this.oldArr[0]!==this.arr[0]){
					this.firstIndex = this.arr[0]
				}else if(this.oldArr[1]!==this.arr[1]){
                    this.secondIndex = this.arr[1]
                }
				this.oldArr = this.arr
				this.getData()
			
			},
			getData(){
				let arr = []
				this.provice = this.columnsCitys[this.oldArr[0]].text
				const proviceCode = this.columnsCitys[this.oldArr[0]].code
				arr.push(this.provice)
				this.city = this.columnsCitys[this.oldArr[0]].children[this.oldArr[1]].text
                const cityCode = this.columnsCitys[this.oldArr[0]].children[this.oldArr[1]].code
				arr.push(this.city)
				this.area = this.columnsCitys[this.oldArr[0]].children[this.oldArr[1]].children[this.oldArr[2]].text
                const areaCode = this.columnsCitys[this.oldArr[0]].children[this.oldArr[1]].children[this.oldArr[2]].code
				arr.push(this.area)
                const str = `${this.provice}:${proviceCode},${this.city}:${cityCode},${this.area}:${areaCode}`
				this.$emit('getData', str)
			}
		}
	}
</script>

<style lang="scss">
	.picker-wrapper {
		 height: 250rpx;
	}
	// .pickerViewp {
	// 	height: 200rpx;
	// }
    // .pickerViewp {
    //     width: 100%;
    //     height: 100%;
    //     margin-top: 20rpx;
    // }
    .item {
        height: 200rpx;
        line-height: 200rpx;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
</style>