uniapp组件实现省市区三级联动选择

1.导入插件

先将uni-data-picker组件导入我们的HBuilder项目中，在DCloud插件市场搜索uni-data-picker

点击下载插件并导入到我们的项目中

2.组件调用

curLocation ：获取到的当前位置（省市区）

<uni-data-picker v-slot:default="{data, error, options}" :localdata="localData" popup-title="请选择省市区" @change="onchange" @nodeclick="onnodeclick">
	<view class="selectedAddress">
            <view v-if="data.length == 0 && curLocation">{{ curLocation }}</view>
            <view v-if="data.length" class="selected">
            <view v-for="(item,index) in data" :key="index" class="selected-item">
                <text>{{item.text}} </text> 
            </view>
	</view>
	<view class="addrlocation">
            <uni-icons type="location" color="#ec4149" size="24"></uni-icons>
	</view>
	</view>
</uni-data-picker>

data(){
    return {
        localData:[], //省市区地址
		curLocation: uni.getStorageSync('location_address'),
    }
}

3.处理我们需要的省市区数据

1）在gitee.com/dcloud/open…下载省市区源数据，collection/opendb-city-china

2）下载后的数据是一组一维对象数组，接下来把这个数组处理成树形结构

在页面中引入：

const cityRows = require('@/common/opendb-master/collection/opendb-city-china/data.json')

// 省市区数据树生成
get_city_tree () {
    let res = []
    if (cityRows.length) {
	// 递归生成
	res = this.handleTree(cityRows)
    }
    return res
},
 
 
handleTree (data, parent_code = null) {let res = []let keys = {
    id: 'code',
    pid: 'parent_code',
    children: 'children',
					
    text: 'name',
    value: 'code'}
                                    let oneItemDEMO = {
    text: '',
    value: '',
    children: []}let oneItem = {}
				
                                    // 循环for (let index in data) {
    // 判断
    if (parent_code === null) {
            // 顶级菜单 - 省
       if (!data[index].hasOwnProperty( keys.pid ) || data[index][keys.pid] == parent_code) {
             // 不存在parent_code，或者已匹配
             oneItem = JSON.parse(JSON.stringify(oneItemDEMO))
             oneItem.text = data[index][keys.text]
             oneItem.value = data[index][keys.value]
							
             // 递归下去
             oneItem.children = this.handleTree(data, data[index][keys.id])
             res.push(oneItem)
      } 
    } else {
            // 非顶级菜单 - 市、区、街道
       if (data[index].hasOwnProperty( keys.pid ) && data[index][keys.pid] == parent_code) {
		// 已匹配
		oneItem = JSON.parse(JSON.stringify(oneItemDEMO))
		oneItem.text = data[index][keys.text]
		oneItem.value = data[index][keys.value]
							
		// 递归下去
		oneItem.children = this.handleTree(data, data[index][keys.id])
		res.push(oneItem)				
	}
}}return re},

onLoad(options){
    this.localData = this.get_city_tree()
}

最后的效果：