uniapp四级联动地址选择器（带json数据末尾有链接）

11isme

已于 2023-08-24 22:55:02 修改

阅读量1k

点赞数 2

文章标签： uni-app 前端 javascript

于 2023-08-24 22:09:02 首次发布

本文链接：https://blog.csdn.net/m0_50997866/article/details/132483294

版权

该文章描述了如何在Vue项目中使用四级联动选择器，通过picker组件和数组操作来实现省市区县的动态选择，并通过props和事件处理函数进行数据传递。

摘要由CSDN通过智能技术生成

<template>
	<view>
		<view class="list" :style="{width:width+'rpx',height:height+'rpx'}">
			<view class="name">收货地址</view>
			<picker class="picker" mode="multiSelector" :range="region" range-key="name" :value="regionIndex"
				@change="pickerChange" @columnchange="pickerColumnchange">
				<view class="pbox" :class="{'pbox_hover':regionStr != '请选择省市区'}">
					<view>{
  {regionStr}}</view>
					<text class="iconfont icon-you"></text>
				</view>
			</picker>
		</view>
	</view>
</template>
<script>
	import region from './chinaRegion.json'
	export default {
		data() {
			return {
				// 原数组
				oldRegion: region,
				// 处理后的数组
				region: [
					[],
					[],
					[],
					[]
				],
				// 选择省市区的下标Index  传则默认选中传递的
				regionIndex: [0, 0, 0, 0],

				// 选择的id
				// previnceId: 11,
				// cityId: 1101,
				// districtId: 110101,
				// countyId: 110101001

				// 省市区字符串
				regionStr: '请选择省/市/区/镇或县'
			};
		},
		props: {
			// 组件高度
			height: {
				type: [Number],
				default: 92
			},
			// 组件宽度
			width: {
				type: [Number],
				default: 710
			},
			// 省id
			previnceId: {
				type: [Number],
				default: 11
			},
			// 市辖区id
			cityId: {
				type: [Number],
				default: 1101
			},
			// 区id
			districtId: {
				type: [Number],
				default: 110101
			},
			// 县
			countyid: {
				type: [Number],
				default: 110101001
			},
			// 是否是为修改(true为修改)
			isRevise: {
				type: [Bool