uniapp封装三级联动省市区(可以进行数据回填)

<view class="" @touchmove.stop.prevent="preventTouchMove">
			<picker-view class="address-picker-box" :indicator-style="indicatorStyle" :value="pcaIndex"
				@change="bindChange">
				<picker-view-column class="center">
					<div class="address-picker-item center" v-for="(item,index) in provinceList" :key="index">
						<text class="address-picker-item-text">{{item.shortName}}</text>
					</div>
				</picker-view-column>
				<picker-view-column>
					<div class="address-picker-item center" v-for="(item,index) in provinceList[pcaIndex[0]].children"
						:key="index">
						<text class="address-picker-item-text">{{item.shortName}}</text>
					</div>
				</picker-view-column>
				<picker-view-column>
					<div class="address-picker-item center"
						v-for="(item,index) in provinceList[pcaIndex[0]].children[pcaIndex[1]].children" :key="index">
						<text class="address-picker-item-text">{{item.shortName}}</text>
					</div>
				</picker-view-column>
			</picker-view>
		</view>

城市格式
[
{
children:[
children:[
{
shortName:'东城''
},
....
]
shortName:'北京''
]
shortName:'北京''
}
]
格式就是嵌套

jsd代码

data(){
return {
provinceList: uni.getStorageSync('cityData'), // 省列表一定要提前去获取数据,可以在上个页面本地缓存,
pcaIndex: [0, 0, 0],//这个可以设置会填的数据,根据索引,
}
},
methods:{
//监听
	bindChange(e) {
				let currentIndex = e.detail.value;
				if (currentIndex[0] != this.pcaIndex[0]) {
					this.pcaIndex.splice(0, 3, currentIndex[0], 0, 0);
					return;
				}
				if (currentIndex[1] != this.pcaIndex[1]) {
					this.pcaIndex.splice(1, 2, currentIndex[1], 0);
					return;
				}
				if (currentIndex[2] != this.pcaIndex[2]) {
					this.pcaIndex.splice(2, 1, currentIndex[2]);
					return;
				}
			},
}

《程序员》曾陪伴了无数开发者成长。《新程序员》全新归来，推荐给大家！

里面东西不太全,不懂得,可以私信我