前言：

這個功能的實現(xiàn)，中間耽誤了幾天，在大佬的幫助下終于實現(xiàn)效果，匿名感謝xx大佬

要實現(xiàn)的效果如下：

1、首先需要獲取省市區(qū)的數(shù)據(jù)，不考慮后端返數(shù)據(jù)，自己使用json文件的話，需要獲取到完整的中國省市區(qū)數(shù)據(jù)
有個很不錯的github源碼可供參考，Administrative-divisions-of-China中國行政區(qū)劃數(shù)據(jù)，請戳這里進(jìn)行跳轉(zhuǎn)

我選擇的是省市區(qū)三級聯(lián)動數(shù)據(jù)

github有時很難加載出來，最下面附了完整的數(shù)據(jù)結(jié)構(gòu)
2、 拿到j(luò)osn數(shù)據(jù)后，在uniapp的static文件夾中新建provinceData文件夾，新建provinceData.json文件

沒截全，數(shù)據(jù)太多了

3、然后引入到要使用的頁面中

import provinceData from '@/static/provinceData/provinceData.json';

打印出來的效果：

4、然后開始給uviewplus的u-select組件綁數(shù)據(jù)，vue3是u-picke,
這里遇到個問題，只能說第一次開發(fā)，好多點都不懂，u-select只有2x版本才有，我的項目是vue3，需要3x版本，而3x版本里不叫u-select，是u-picker選擇器

當(dāng)我發(fā)現(xiàn)u-select使用后效果始終無法出來的時候，我在uni_modules/uview-plus/components文件夾下找是否有u-select，沒找到之后我去hbuilderx插件市場搜uview-plus

點進(jìn)去之后里面有官網(wǎng)文檔的鏈接

打開之后才發(fā)現(xiàn)，我之前看的都是2x的版本，說多了都是淚

5、代碼解析：

1、3x版是通過show屬性控制顯示與隱藏
2、columns中接收的是二維數(shù)組，需要展示幾列，就有幾個對應(yīng)的二維數(shù)組
3、如何觸發(fā)u-picker打開，這里沒寫，就是在你的點擊事件里將data.uselectshow設(shè)置為true就行文章來源地址http://www.zghlxwxcb.cn/news/detail-762529.html

<u-picker :show="data.uselectshow" ref="uPicker" :columns="provincelist" @confirm="uPickerconfirm" @change="uPickerchangeHandler" @cancel="uCancel"></u-picker>

	import {
    reactive, ref } from "vue";
	import {
    onReady, onLoad } from "@dcloudio/uni-app";
	import provinceData from '@/static/provinceData/provinceData.json';
	
	let provincelist = reactive([])
    let data = reactive({
   	
		uselectshow: false,//是否顯示所在地	
		userInfo: {
   
			city: "",//所在地			
		},
	});

	onReady(() => {
   
		// 處理省市區(qū)數(shù)據(jù)結(jié)構(gòu)
		dealPrinvceData(provinceData)
	})
	// 處理省市區(qū)數(shù)據(jù)結(jié)構(gòu)，每一步都打印了，具體截圖如下：
	function dealPrinvceData(data) {
   
		// 所在地初始化地區(qū)，默認(rèn)第一個城市
				console.log(data,'data---1')

到了這里，關(guān)于【uniapp+vue3+u-picker】獲取中國省市區(qū)數(shù)據(jù)結(jié)構(gòu)，省市區(qū)數(shù)據(jù)三級聯(lián)動json文件完整版，已實現(xiàn)三級聯(lián)動效果+省市區(qū)街道數(shù)據(jù)四級聯(lián)動json文件完整版，已實現(xiàn)四級聯(lián)動效果的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！