?使用的數(shù)據(jù)如下格式：

[
    {
        label:'北京市',
        value:'1',
        children:[
            {
                label:'北京市',
                value:'5026',
                children:[
                    {
                        label:'東城區(qū)',
                        value:'37',
                    },
                    {
                        label:'西城區(qū)',
                        value:'38',
                    }
                ]
            }
        ]
    }
]

<picker mode="multiSelector" :value="multiIndex" :range="newAddressList" range-key="label" @change="pickerChange" @columnchange="pickerColumnchange">
	<view class="uni-input">
		{{newAddressList[0][multiIndex[0]].label}}-{{newAddressList[1][multiIndex[1]].label}}-{{newAddressList[2][multiIndex[2]].label}}
	</view>
</picker>

?文章來源地址http://www.zghlxwxcb.cn/news/detail-501930.html

<script>
	
	export default {
		data() {
			return {
				oldAddressList: [],
				newAddressList:[
					[],[],[]
				],
				multiIndex: [0,0,0]
            }
		},
        mounted() {
			// 初始化省份數(shù)據(jù)
			// this.handleProvinceChange(0);
			var that = this;
			var url = '你的接口';
			var data = {
				
			}
			that.util.asynRequest(url, data, 'post',
			function(res) {
				console.log(res.data);
				that.oldAddressList = res.data;
				that.initAddress();
			},
			function(err) {
				console.log(JSON.stringify(err));
				that.util.showToast(err.message);
			})
		    
		},
        methods: {
			initAddress(){
				this.newAddressList[0] = this.oldAddressList.map((item,index)=>{
					// console.log('item:',item);
					var obj = {
						label:item.label,
						value:item.value
					}
					return obj
				})
				this.newAddressList[1] = this.oldAddressList[this.multiIndex[0]].children.map((item,index)=>{
					// console.log('item:',item);
					var obj = {
						label:item.label,
						value:item.value
					}
					return obj
				})
				this.newAddressList[2] = this.oldAddressList[this.multiIndex[0]].children[this.multiIndex[1]].children.map((item,index)=>{
					// console.log('item:',item);
					var obj = {
						label:item.label,
						value:item.value
					}
					return obj
				})
				
				console.log('this.newAddressList:',this.newAddressList);
			},
			pickerChange(e){
				console.log('pickerChange:',e);
			},
			pickerColumnchange(e){
				console.log('pickerColumnchange:',e);
				// 第幾列滑動(dòng)
				// console.log(e.detail.column);
				// 第幾列滑動(dòng)的下標(biāo)
				// console.log(e.detail.value)
				// 第一列滑動(dòng)
				if(e.detail.column === 0){
					this.multiIndex[0] =  e.detail.value;
					
					this.newAddressList[1] = this.oldAddressList[this.multiIndex[0]].children.map((item,index)=>{
						// console.log('item:',item);
						var obj = {
							label:item.label,
							value:item.value
						}
						return obj
					})
					this.newAddressList[2] = this.oldAddressList[this.multiIndex[0]].children[this.multiIndex[1]].children.map((item,index)=>{
						// console.log('item:',item);
						var obj = {
							label:item.label,
							value:item.value
						}
						return obj
					})
					
					this.multiIndex.splice(1, 1, 0)
					this.multiIndex.splice(2, 1, 0)
				}
				if(e.detail.column === 1){
					this.multiIndex[1] =  e.detail.value
					this.newAddressList[2] = this.oldAddressList[this.multiIndex[0]].children[this.multiIndex[1]].children.map((item,index)=>{
						// console.log('item:',item);
						var obj = {
							label:item.label,
							value:item.value
						}
						return obj
					})
					
					// 第二列 滑動(dòng) 第三列 變成第一個(gè)
					this.multiIndex.splice(2, 1, 0)
				}
				if(e.detail.column === 2){
					this.multiIndex[2] =  e.detail.value
				}
			},

        }

    }

到了這里，關(guān)于uniapp picker mode=“multiSelector“ 實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！