uniapp+vue实现行政区划编码选择

1、下载行政区划编码json文件；

全国行政区划编码json文件

2、将下载的region-data.json文件放置static文件夹下；

3、在views文件下新建一个vue文件，将下面复制粘贴保存；

<template>
	<view>
		<u-search placeholder="请选择省/市/区" v-model="regionText" @focus="showPicker = true" @search="search"
			@custom="search"></u-search>
		<!-- 三级联动选择器 -->
		<u-picker ref="uPicker" :show="showPicker" :columns="columns" keyName="name" @confirm="onConfirm"
			@change="changeHandler" @cancel="showPicker = false" />
	</view>
</template>

<script>
	import provinceData from '@/static/region-data.json'
	export default {
		data() {
			return {
				keyword: "110000",
				showPicker: false,
				provinceList: [], // 省列表
				cityList: [], // 市列表
				districtList: [], // 区列表
				selectedCodes: ["110000", "110100", "110101"], // 选中的编码 [省code, 市code, 区code]
				regionText: '', // 显示文本
				columns: [
					[{
						name: '雪月夜',
						// 其他属性值
						id: 2021
						// ...
					}, {
						name: '冷夜雨',
						id: 804
					}],
					[{
						name: '雪月夜',
						// 其他属性值
						id: 2021
						// ...
					}, {
						name: '冷夜雨',
						id: 804
					}]
				]
			}
		},
		methods: {
			// 初始化省份数据
			initProvince() {
				this.provinceList = provinceData.map(item => ({
					code: item.code,
					name: item.name,
					city: item.city
				}));
				this.columns[0] = this.provinceList;
			},

			// 加载市级数据
			loadCities(provinceCode) {
				const province = this.provinceList.find(p => p.code === provinceCode)
				this.cityList = province?.city || []
				this.districtList = []
				this.columns[1] = this.cityList;
			},

			// 加载区级数据
			loadDistricts(cityCode) {
				const city = this.cityList.find(c => c.code === cityCode)
				this.districtList = city?.area || []
				this.columns[2] = this.districtList;
			},

			// 获取默认选中索引
			getDefaultIndex(level, list) {
				const code = this.selectedCodes[level]
				return code ? list.findIndex(item => item.code === code) : 0
			},

			// 确认选择
			onConfirm(e) {
				const [province, city, district] = e.value
				this.selectedCodes = [
					province?.code,
					city?.code,
					district?.code
				]

				// 生成显示文本
				this.regionText = [province?.name, city?.name, district?.name]
					.filter(Boolean).join('/')
				// 更新数据
				if (province) this.loadCities(province.code)
				if (city) this.loadDistricts(city.code)
				this.showPicker = false
				this.keyword = e.value[2].code;
			},
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, value[0].city)
					picker.setColumnValues(2, value[0].city[0].area)
				} else if (columnIndex === 1) {
					picker.setColumnValues(2, value[1].area)
				}
			},
			search() {
				//查询后端服务获取数据
				console.log(this.keyword);
			}
		},
		watch: {
			// 监听选择器显示状态
			showPicker(val) {
				if (val) {
					// 每次打开时重置数据
					this.cityList = []
					this.districtList = []
					this.loadCities(this.selectedCodes[0])
					this.loadDistricts(this.selectedCodes[1])
				}
			}
		},
		mounted() {
			this.initProvince();
		}

	}
</script>

<style>
</style>

4、在pages.json文件配置路径保存；