【完整代码】uni-app原生picker实现地址选择器

Chrome运行效果如下：

父组件：

<template>
	<view>
		<address-picker @change="change">
			<view class="word">{{address}}</view>
			<view class="word" slot="province">{{list[0]==""?"未选择":list[0]}}</view>
			<view class="word" slot="city">{{list[1]==""?"未选择":list[1]}}</view>
			<view class="word" slot="area">{{list[2]==""?"未选择":list[2]}}</view>
		</address-picker>
	</view>
</template>

<script>
	import addressPicker from './components/addressPicker.vue'
	export default {
		components: {
			addressPicker
		},
		data() {
			return {
				address: "选择地址",
				list: ["", "", ""]
			}
		},
		onLoad() {

		},
		methods: {
			change(selectValue) {
				this.address = selectValue.join("")
				this.list = selectValue
			}
		}
	}
</script>

<style lang="scss" scoped>
	.word {
		width: 750rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		font-size: 28rpx;
	}
</style>

子组件：

<template>
	<view>
		<picker @change="confirm" @columnchange="columnchange" :range="array" range-key="name" :value="value"
			mode="multiSelector">
			<slot></slot>
			<slot name="province"></slot>
			<slot name="city"></slot>
			<slot name="area"></slot>
		</picker>
	</view>
</template>

<script>
	import allAddress from '../js/address.js' //引入总数据库//
	export default {
		data() {
			return {
				array: [], //选择器的源数据//
				allarray: allAddress, //总数据库//
				value: [0, 0, 0], //索引值//
				selectValue: ["", "", ""] //选中的数据//
			}
		},
		created() {
			this.init()
		},
		methods: {
			//组件初始化//
			init() {
				this.updateArray()
					.updateSelectArray()
					.$forceUpdate() //强制刷新//
			},
			//更新源数据//
			updateArray() {
				//通过索引从总数据库里抓取当前选择器所需要的源数据//
				this.array = []
				this.array[0] = this.allarray.map(obj => {
					return obj.name
				})
				this.array[1] = this.allarray[this.value[0]].city.map(obj => {
					return obj.name
				})
				this.array[2] = this.allarray[this.value[0]].city[this.value[1]].area.map(obj => {
					return obj
				})
				return this
			},
			//更新索引//
			updateValue(column, value) {
				let arr = JSON.parse(JSON.stringify(this.value))
				arr[column] = value
				if (column === 0) {
					arr[1] = 0
					arr[2] = 0
				}
				if (column === 1) {
					arr[2] = 0
				}
				this.value = arr
				return this
			},
			//更新选中的数据//
			updateSelectArray() {
				this.selectValue[0] = this.array[0][this.value[0]]
				this.selectValue[1] = this.array[1][this.value[1]]
				this.selectValue[2] = this.array[2][this.value[2]]
				return this
			},
			//确认选择，通过emit触发父组件方法并传递参数//
			confirm() {
				this.$emit('change', this.selectValue)
			},
			//某一列的值改变时触发，可返回列的下标和当前值的下标//
			columnchange(e) {
				this.updateValue(e.detail.column, e.detail.value)
					.updateArray()
					.updateSelectArray()
					.$forceUpdate() //强制刷新//
			}

			//tips://
			//1.强制刷新的作用//
			//迫使Vue实例重新渲染，其作用范围仅包括实例本身以及有插槽内容的子组件//
			//2.slot标签的介绍//
			//如果去掉子组件的slot标签，那么父组件放在子组件里的一些DOM就不会显示，在本例中父组件将//
			//选中结果的text文本放在子组件内展示，所以需要slot标签，除此之外也可以通过在子组件内给//
			//slot标签赋予name属性，在父组件内通过赋予slot属性，其值为对应的name名称来进行展示，也就是//
			//所谓的具名插槽//
		}
	}
</script>

<style>
</style>

js文件：

export default [{
		"name": "北京",
		"city": [{
			"name": "北京市",
			"area": [
				"东城区",
				"西城区",
				"崇文区",
				"宣武区",
				"朝阳区",
				"丰台区",
				"石景山区",
				"海淀区",
				"门头沟区",
				"房山区",
				"通州区",
				"顺义区",
				"昌平区",
				"大兴区",
				"平谷区",
				"怀柔区",
				"密云县",
				"延庆县"
			]
		}]
	},
	{
		"name": "天津市",
		"city": [{
			"name": "天津市",
			"area": [
				"和平区",
				"河东区",
				"河西区",
				"南开区",
				"河北区",
				"红桥区",
				"塘沽区",
				"汉沽区",
				"大港区",
				"东丽区",
				"西青区",
				"津南区",
				"北辰区",
				"武清区",
				"宝坻区",
				"宁河县",
				"静海县",
				"蓟 县"
			]
		}]
	},
	{
		"name": "河北省",
		"city": [{
				"name": "石家庄市",
				"area": [
					"长安区",
					"桥东区",
					"桥西区",
					"新华区",
					"郊 区",
					"井陉矿区",
					"井陉县",
					"正定县",
					"栾城县",
					"行唐县",
					"灵寿县",
					"高邑县",
					"深泽县",
					"赞皇县",
					"无极县",
					"平山县",
					"元氏县",
					"赵 县",
					"辛集市",
					"藁",
					"晋州市",
					"新乐市",
					"鹿泉市"
				]
			},
			{
				"name": "唐山市",
				"area": [
					"路南区",
					"路北区",
					"古冶区",
					"开平区",
					"新 区",
					"丰润县",
					"滦 县",
					"滦南县",
					"乐亭县",
					"迁西县",
					"玉田县",
					"唐海县",
					"遵化市",
					"丰南市",
					"迁安市"
				]
			},
			{
				"name": "秦皇岛市",
				"area": [
					"海港区",
					"山海关区",
					"北戴河区",
					"青龙满族自治县",
					"昌黎县",
					"抚宁县",
					"卢龙县"
				]
			},
			{
				"name": "邯郸市",
				"area": [
					"邯山区",
					"丛台区",
					"复兴区",
					"峰峰矿区",
					"邯郸县",
					"临漳县",
					"成安县",
					"大名县",
					"涉 县",
					"磁 县",
					"肥乡县",
					"永年县",
					"邱 县",
					"鸡泽县",
					"广平县",
					"馆陶县",
					"魏 县",
					"曲周县",
					"武安市"
				]
			},
			{
				"name": "邢台市",
				"area": [
					"桥东区",
					"桥西区",
					"邢台县",
					"临城县",
					"内丘县",
					"柏乡县",
					"隆尧县",
					"任 县",
					"南和县",
					"宁晋县",
					"巨鹿县",
					"新河县",
					"广宗县",
					"平乡县",
					"威 县",
					"清河县",
					"临西县",
					"南宫市",
					"沙河市"
				]
			},
			{
				"name": "保定市",
				"area": [
					"新市区",
					"北市区",
					"南市区",
					"满城县",
					"清苑县",
					"涞水县",
					"阜平县",
					"徐水县",
					"定兴县",
					"唐 县",
					"高阳县",
					"容城县",
					"涞源县",
					"望都县",
					"安新县",
					"易 县",
					"曲阳县",
					"蠡 县",
					"顺平县",
					"博野",
					"雄县",
					"涿州市",
					"定州市",
					"安国市",
					"高碑店市"
				]
			},
			{
				"name": "张家口",
				"area": [
					"桥东区",
					"桥西区",
					"宣化区",
					"下花园区",
					"宣化县",
					"张北县",
					"康保县",
					"沽源县",
					"尚义县",
					"蔚 县",
					"阳原县",
					"怀安县",
					"万全县",
					"怀来县",
					"涿鹿县",
					"赤城县",
					"崇礼县"
				]
			},
			{
				"name": "承德市",
				"area": [
					"双桥区",
					"双滦区",
					"鹰手营子矿区",
					"承德县",
					"兴隆县",
					"平泉县",
					"滦平县",
					"隆化县",
					"丰宁满族自治县",
					"宽城满族自治县",
					"围场满族蒙古族自治县"
				]
			},
			{
				"name": "沧州市",
				"area": [
					"新华区",
					"运河区",
					"沧 县",
					"青 县",
					"东光县",
					"海兴县",
					"盐山县",
					"肃宁县",
					"南皮县",
					"吴桥县",
					"献 县",
					"孟村回族自治县",
					"泊头市",
					"任丘市",
					"黄骅市",
					"河间市"
				]
			},
			{
				"name": "廊坊市",
				"area": [
					"安次区",
					"固安县",
					"永清县",
					"香河县",
					"大城县",
					"文安县",
					"大厂回族自治县",
					"霸州市",
					"三河市"
				]
			},
			{
				"name": "衡水市",
				"area": [
					"桃城区",
					"枣强县",
					"武邑县",
					"武强县",
					"饶阳县",
					"安平县",
					"故城县",
					"景 县",
					"阜城县",
					"冀州市",
					"深州市"
				]
			}
		]
	},
	{
		"name": "山西省",
		"city": [{
				"name": "太原市",
				"area": [
					"小店区",
					"迎泽区",
					"杏花岭区",
					"尖草坪区",
					"万柏林区",
					"晋源区",
					"清徐县",
					"阳曲县",
					"娄烦县",
					"古交市"
				]
			},
			{
				"name": "大同市",
				"area": [
					"城 区",
					"矿 区",
					"南郊区",
					"新荣区",
					"阳高县",
					"天镇县",
					"广灵县",
					"灵丘县",
					"浑源县",
					"左云县",
					"大同县"
				]
			},
			{
				"name": "阳泉市",
				"area": [
					"城 区",
					"矿 区",
					"郊 区",
					"平定县",
					"盂 县"
				]
			},
			{
				"name": "长治市",
				"area": [
					"城 区",
					"郊 区",
					"长治县",
					"襄垣县",
					"屯留县",
					"平顺县",
					"黎城县",
					"壶关县",
					"长子县",
					"武乡县",
					"沁 县",
					"沁源县",
					"潞城市"
				]
			},
			{
				"name": "晋城市",
				"area": [
					"城 区",
					"沁水县",
					"阳城县",
					"陵川县",
					"泽州县",
					"高平市"
				]
			},
			{
				"name": "朔州市",
				"area": [
					"朔城区",
					"平鲁区",
					"山阴县",
					"应 县",
					"右玉县",
					"怀仁县"
				]
			},
			{
				"name": "忻州市",
				"area": [
					"忻府区",
					"原平市",
					"定襄县",
					"五台县",
					"代 县",
					"繁峙县",
					"宁武县",
					"静乐县",
					"神池县",
					"五寨县",
					"岢岚县",
					"河曲县",
					"保德县",
					"偏关县"
				]
			},
			{
				"name": "吕梁市",
				"area": [
					"离石区",
					"孝义市",
					"汾阳市",
					"文水县",
					"交城县",
					"兴 县",
					"临 县",
					"柳林县",
					"石楼县",
					"岚 县",
					"方山县",
					"中阳县",
					"交口县"
				]
			},
			{
				"name": "晋中市",
				"area": [
					"榆次市",
					"介休市",
					"榆社县",
					"左权县",
					"和顺县",
					"昔阳县",
					"寿阳县",
					"太谷县",
					"祁 县",
					"平遥县",
					"灵石县"
				]
			},
			{
				"name": "临汾市",
				"area": [
					"临汾市",
					"侯马市",
					"霍州市",
					"曲沃县",
					"翼城县",
					"襄汾县",
					"洪洞县",
					"古 县",
					"安泽县",
					"浮山县",
					"吉 县",
					"乡宁县",
					"蒲 县",
					"大宁县",
					"永和县",
					"隰 县",
					"汾西县"
				]
			},
			{
				"name": "运城市",
				"area": [
					"运城市",
					"永济市",
					"河津市",
					"芮城县",
					"临猗县",
					"万荣县",
					"新绛县",
					"稷山县",
					"闻喜县",
					"夏 县",
					"绛 县",
					"平陆县",
					"垣曲县"
				]
			}
		]
	}
]