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

<template>
<!-- #ifndef MP-WEIXIN -->
<picker class="myInput" range-key="name" :range="addressList" mode="multiSelector"
						@columnchange="columnchange" @change="changeAddress">
<view class="editRow">
{{editForm.adress}}
</view>
</picker>
<!-- #endif -->
</template>

<script>
    export default {
        data(){
        return{
        timer: null, //节流器
	    addressList: [
					[],
					[],
					[]
	     ],
          }
        }
    },
        created() {
			// #ifndef MP-WEIXIN
			this.getProvince()
			this.getCity()
			// this.getDistrict()
			// #endif

		},
            // 获取省份
			getProvince() {
				const _this = this
				this.$cheeseApi({
					url: "/systemInfo/getAreaList",
					method: 'get',
					data: {
						type: 1,
						code: 0
					}
				}, true).then(res => {
					if (res.code === 200) {
						_this.addressList.splice(0, 1, [...res.data])
					}
				}).catch(err => {
					console.log(err, 'err');
				})
			},
			//获取市
			getCity(type = 2, code = 110000) {
				const _this = this
				this.$cheeseApi({
					url: "/systemInfo/getAreaList",
					method: 'get',
					data: {
						type,
						code
					}
				}, true).then(res => {
					if (res.code === 200) {
						_this.addressList.splice(1, 1, [...res.data])
						const item = res.data[0]
						_this.getDistrict(3, item.code)
					}
				}).catch(err => {
					console.log(err, 'err');
				})
			},
			//获取区
			getDistrict(type = 3, code = 110100) {
				const _this = this
				this.$cheeseApi({
					url: "/systemInfo/getAreaList",
					method: 'get',
					data: {
						type,
						code
					}
				}, true).then(res => {
					if (res.code === 200) {
						_this.addressList.splice(2, 1, [...res.data])
					}
				}).catch(err => {
					console.log(err, 'err');
				})
			},
			// 列改变
			columnchange(e) {
				clearTimeout(this.timer)
				const _this = this
				this.timer = setTimeout(() => {
					// console.log(e.detail, 'columnchange');
					const {
						column,
						value
					} = e.detail
					const item = {
						..._this.addressList[column][value]
					}
					if (column === 0) {
						console.log(item, 'item');
						_this.getCity(2, item.code)
					} else if (column === 1) {
						console.log(item, 'item');
						_this.getDistrict(3, item.code)
					}
				}, 300)

			},
			//选择省市区
			changeAddress(e) {
				console.log(e.detail.value, 'changeAddress');
				const _this = this
				const arr = e.detail.value
				let str = ''
				arr.forEach((el, index) => {
					const {
						name
					} = _this.addressList[index][el]
					console.log(name, 'name');
					str += `${index ? '-':''}${name}`
				})
				if(str){
					this.editForm.adress = str
					this.getIconColor('adress')
				}
				console.log(str, 'str');

			},
</script>