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)在https://gitee.com/dcloud/opendb下载省市区源数据,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 res
},
onLoad(options){
this.localData = this.get_city_tree()
}
最后的效果: