uniapp picker实现省市二级级联和省市区三级级联

news2024/11/26 11:15:35

接口返回值格式:
在这里插入图片描述

二级级联-vue2

				<picker mode="multiSelector" @change="bindPickerChange" @columnchange="columnchange" :value="index"
					:range="array" range-key="label">
					<view class="uni-input">{{title}}</view>
				</picker>
export default {
		data() {
			return {
				index: [0, 0],
				array: [
					[],
					[]
				],
				childArr: [], // 二级分类数据源
				title: '请选择'
				}
			}
		}
	//籍贯二级列表处理
			// 获取二级分类
			columnchange(e) {
				// 当滚动切换一级分类时,为当前的一级分类添加它的子类
				if (e.detail.column == 0) {
					// #ifdef H5
					// 在小程序中直接赋值无效  H5 可直接赋值
					this.array[1] = this.childArr[e.detail.value]
					// #endif
					// #ifdef MP-WEIXIN
					// 在 H5 环境下 $set 会导致一级分类无法滚动, 小程序正常运行
					this.$set(this.array, 1, this.childArr[e.detail.value])
					// #endif
				}
			},

			// 选择籍贯
			bindPickerChange(e) {
				console.log('picker发送选择改变,携带值为', e)

				let selectValue = e.detail.value;

				if (this.array[0].length != 0) {
					this.title = this.array[0][selectValue[0]].label

					// 只传市一级的id
					this.personData.native_place = this.array[0][selectValue[0]].value
				};
				if (this.array[1].length != 0) {
					this.title += ',' + this.array[1][selectValue[1]].label
					this.personData.native_place = this.array[1][selectValue[1]].value
				}

			},

			// 获取籍贯
			async getNativePlace() {
			//获取接口数据
				const {
					data
				} = await GetNativePlace()
				// 一级分类的数据源
				this.array[0] = data
				// 将数据源中的二级分类 push 进 childArr,作为二级分类的数据源
				this.childArr = data.map((item) => item.children)
				// 第一次打开时,默认给一级分类添加它的二级分类
				this.array[1] = this.childArr[0]
			},

三级级联-vue3

					<picker mode="multiSelector" :value="pageData.multiIndex" :range="pageData.newAddressList" range-key="label"
						@change="pickerChange" @columnchange="pickerColumnchange">
						<view class="uni-input">
							{{pageData.addressName}}
						</view>
					</picker>
	const pageData = reactive({
		oldAddressList: [],
		newAddressList: [
			[0],
			[0],
			[0]
		],
		multiIndex: [0, 0, 0],
		addressName: '请选择',
	})
	//获取省市区
	const getProvinceEtc = async () => {
	//获取接口数据
		const res = await uni.$http.post('/api/common/getCity')
		pageData.oldAddressList = res.data.data;
		initAddress();
	}
	getProvinceEtc()

	function initAddress() {
		pageData.newAddressList[0] = pageData.oldAddressList.map((item, index) => {
			// console.log('item:',item);
			var obj = {
				label: item.label,
				value: item.value
			}
			return obj
		})
		pageData.newAddressList[1] = pageData.oldAddressList[pageData.multiIndex[0]].children.map((item, index) => {
			// console.log('item:',item);
			var obj = {
				label: item.label,
				value: item.value
			}
			return obj
		})
		pageData.newAddressList[2] = pageData.oldAddressList[pageData.multiIndex[0]].children[pageData.multiIndex[1]]
			.children.map((
				item, index) => {
				// console.log('item:',item);
				var obj = {
					label: item.label,
					value: item.value
				}
				return obj
			})

		// console.log('this.newAddressList:', pageData.newAddressList);
	}

	//变更选择
	function pickerChange(e) {
		// console.log('pickerChange:', e.detail);
		// console.log(pageData.newAddressList[2][e.detail.value[2]]);
		// console.log(pageData.newAddressList[2][e.detail.value[2]].value);
		pageData.addData.area_id = pageData.newAddressList[2][e.detail.value[2]].value;
		pageData.addressName = pageData.newAddressList[0][pageData.multiIndex[0]].label + '-' + pageData.newAddressList[1][
			pageData.multiIndex[1]
		].label + '-' + pageData.newAddressList[2][pageData.multiIndex[2]].label

	}

	function pickerColumnchange(e) {
		// console.log('pickerColumnchange:', e);
		// 第几列滑动
		// console.log(e.detail.column);
		// 第几列滑动的下标
		// console.log(e.detail.value)
		// 第一列滑动
		if (e.detail.column === 0) {
			pageData.multiIndex[0] = e.detail.value;

			pageData.newAddressList[1] = pageData.oldAddressList[pageData.multiIndex[0]].children.map((item, index) => {
				// console.log('item:',item);
				var obj = {
					label: item.label,
					value: item.value
				}
				return obj
			})
			pageData.newAddressList[2] = pageData.oldAddressList[pageData.multiIndex[0]].children[pageData.multiIndex[1]]
				.children.map(
					(item, index) => {
						// console.log('item:',item);
						var obj = {
							label: item.label,
							value: item.value
						}
						return obj
					})

			pageData.multiIndex.splice(1, 1, 0)
			pageData.multiIndex.splice(2, 1, 0)
		}
		if (e.detail.column === 1) {
			pageData.multiIndex[1] = e.detail.value
			pageData.newAddressList[2] = pageData.oldAddressList[pageData.multiIndex[0]].children[pageData.multiIndex[1]]
				.children.map(
					(item, index) => {
						// console.log('item:',item);
						var obj = {
							label: item.label,
							value: item.value
						}
						return obj
					})

			// 第二列 滑动 第三列 变成第一个
			pageData.multiIndex.splice(2, 1, 0)
		}
		if (e.detail.column === 2) {
			pageData.multiIndex[2] = e.detail.value
		}
	}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2223166.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Qt (QGroupBox、QTableView、QTableWidget)QSS样式

文章目录 设置效果样式内容说明qss文件内容补充 设置效果 先上图&#xff0c;为了方便大家区分&#xff0c;使用了多种颜色进行设置。 样式内容说明 * {background-color: #88e7ea; }设置全局背景色 可能是因为 QGroupBox 的背景色优先级较高&#xff0c;覆盖了全局样式。 …

GD32学习知识点累计

时钟系统 GD32f427主频最高位240MHZ&#xff08;但是只能到200M&#xff09;&#xff0c;GD32给的函数外接25MHZ晶振配置主频为200MHZ,APB1最高频率为60HZ配置为主频的4分频为50MHZ&#xff0c;APB2最大为120MHZ配置为主频的2分频为100MHZ 定时器 无论什么定时器最大频率为200M…

上行流量和下行流量的区别

一、定义 上行流量 指从本地设备&#xff08;如用户的计算机、手机等客户端设备&#xff09;发送数据到远程设备&#xff08;如服务器&#xff09;的流量。简单来说&#xff0c;就是数据从你的设备传出去的过程所产生的流量。例如&#xff0c;当你上传一张图片到云存储服务时&…

Ansible 的脚本 --- playbooks剧本

playbooks 本身由以下各部分组成 &#xff08;1&#xff09;Tasks&#xff1a;任务&#xff0c;即通过 task 调用 ansible 的模板将多个操作组织在一个 playbook 中运行 &#xff08;2&#xff09;Vars&#xff1a;变量 &#xff08;3&#xff09;Templates&#xff1a;模板 &a…

虚拟化数据恢复——Hyper-V虚拟机文件丢失导致虚拟机无法使用的数据恢复案例

虚拟化数据恢复环境&#xff1a; Windows Server操作系统服务器上部署Hyper-V虚拟机环境。虚拟机的硬盘文件和配置文件存放在一台存储中&#xff0c;该存储上有一组由4块硬盘组建的raid5阵列&#xff0c;除此之外&#xff0c;还有一块单盘存放档虚拟机的备份文件。 虚拟化故障…

【ubuntu20.04】【ROS Noetic】【ROS安装】【Website may be down.】【gpg: 找不到有效的 OpenPGP 数据。】

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、登入www.ros.org1.Setup your sources.list2.Set up your keys中间出了点问题 gpg: 找不到有效的 OpenPGP 数据。4.Installation下载安装ros5.环境参数的配…

使用js和canvas、html实现简单的俄罗斯方块小游戏

玩法介绍 点击开始游戏后&#xff0c;使用键盘上的←→控制移动&#xff0c;↑控制方块旋转&#xff0c;↓控制方块加速下落&#xff0c;累计一行即可消除并获得分数&#xff0c;触碰到顶部时游戏结束 代码实现 html代码复制即用&#xff0c;可阅读注释 <!DOCTYPE html…

(三)行为模式:11、模板模式(Template Pattern)(C++示例)

目录 1、模板模式含义 2、模板模式的UML图学习 3、模板模式的应用场景 4、模板模式的优缺点 5、C实现的实例 1、模板模式含义 模板模式&#xff08;Template Method Pattern&#xff09;是一种行为设计模式&#xff0c;它定义了一个操作中的算法骨架&#xff0c;将某些步骤…

【软件工程】软件项目管理/工程项目管理复习资料

第一章 软件项目管理概述习题 一. 填空题 实现项目目标的制约因素有&#xff08; 项目范围 &#xff09;、&#xff08; 成本 &#xff09;、&#xff08; 进度计划 &#xff09;、&#xff08; 客户满意度 &#xff09;等。 项目管理&#xff08; 启动过程组 &#xff09;、…

使用Jenkins持续集成的一些经验总结

作为一名测试开发人员或工程师&#xff0c;您是否曾在项目中遇到手动部署与测试效率低下的问题&#xff1f;当每次提交代码都需要人工触发一系列的构建与测试流程时&#xff0c;整个开发进度都会受到拖累。正是在这样的背景下&#xff0c;Jenkins&#xff0c;作为持续集成的关键…

人工智能在医疗健康领域的应用与展望

随着技术的发展&#xff0c;人工智能&#xff08;Artificial Intelligence, AI&#xff09;正逐渐渗透到各行各业之中&#xff0c;其中医疗健康领域因其对人类福祉的重要性而备受关注。AI技术的应用不仅能够提高医疗服务的质量和效率&#xff0c;还能促进医学研究的进步&#x…

【蓝桥杯选拔赛真题78】python电话号码 第十五届青少年组蓝桥杯python选拔赛真题 算法思维真题解析

目录 python电话号码 一、题目要求 1、编程实现 2、输入输出 二、算法分析 三、程序编写 四、程序说明 五、运行结果 六、考点分析 七、 推荐资料 1、蓝桥杯比赛 2、考级资料 3、其它资料 python电话号码 第十五届蓝桥杯青少年组python比赛选拔赛真题 一、题目要…

在xml 中 不等式 做转义处理的问题

对于这种要做转义处理&#xff0c;<![CDATA[ < ]]>

Golang | Leetcode Golang题解之第507题完美数

题目&#xff1a; 题解&#xff1a; func checkPerfectNumber(num int) bool {if num 1 {return false}sum : 1for d : 2; d*d < num; d {if num%d 0 {sum dif d*d < num {sum num / d}}}return sum num }

django restful API

文章目录 项目地址一、django环境安装1.1 安装python 3.10的虚拟环境1.2 创建django工程文件1.3 创建一个book app1.4 序列化1.4.1创建一个Models1.4.2 创建django的超级用户admin1.4.3 添加serializers.py生成序列化器1.4.4 在app里创建django 视图1.4.5 创建app的urls路由1.4…

《探索 HarmonyOS NEXT(5.0):开启构建模块化项目架构奇幻之旅 —— 模块化基础篇》

从无到有&#xff0c;打造模块化项目。构建一个开箱即用的项目&#xff0c;从 Git 上拉取下来即可直接进行开发&#xff0c;其中涵盖路由通信、上下拉刷新、网络请求、事件通知、顶部tab封装等功能&#xff0c;项目里调用API为鸿洋大佬的wanAndroidAPI。后期将持续完善&#xf…

新华三H3CNE网络工程师认证—OSPF路由协议

OSPF是典型的链路状态路由协议&#xff0c;是目前业内使用非常广泛的IGP协议之一。本博客将对OSPF路由协议进行总结。 OSPF目前针对IPv4协议使用的是OSPFVersion2(RFC2328)&#xff1b; 针对IPv6协议使用OSPFVersion3(RFC2740)。如无特殊说明本章后续所指的OSPF均为OSPF Versi…

使用Python和Matplotlib模拟3D海浪动画

使用Python和Matplotlib模拟3D海浪动画 在计算机图形学和动画领域&#xff0c;模拟逼真的海洋表面一直是一个具有挑战性的问题。本文将介绍如何使用Python的Matplotlib库和Gerstner波浪模型&#xff0c;创建一个动态的3D海浪动画。通过叠加多个波浪&#xff0c;我们可以生成复…

行为设计模式 -命令模式- JAVA

命令模式 一.简介二. 案例2.1 接收者&#xff08;Receiver&#xff09;2.2 命令接口实现对象&#xff08;ConcreteCommand&#xff09;2.3 调用者&#xff08; invoker&#xff09;2.4 获取Receiver对象2. 5 装配者客户端测试 三. 结论3.1 要点3.2 示例 一.简介 百度百科&…

HarmonyOS第一课——HarmonyOS介绍

HarmonyOS第一课 HarmonyOS介绍 HarmonyOS是新一代的智能终端操作系统&#xff08;泛终端服务的载体&#xff09;&#xff1b; 智慧互联协同&#xff0c;全场景交互体验&#xff1b; 核心技术理念&#xff1a; 一次开发 多次部署&#xff1a; 预览 可视化开发UI适配 事件交…