uniapp用picker实现自定义三级联动(children)

news2024/9/29 11:30:22

数据大概得结构:

html:

<view class="invite">
				<u-cell title="点击选则" isLink :value="value" @click="shows=true"></u-cell>
				<u-picker :show="shows" ref="uPicker" :columns="columns" @confirm="confirm" @cancel="shows=false"
					@change="changeHandler"></u-picker>
			</view>

js:

shows: false,
				columns: [],
				origiData: [],
				value: "",
async branchAppov() {
				const res = await branchAppov()
				this.origiData = res.data
				this.handelData();
			},
//初始化开始数据
			handelData() {
				// console.log(this.origiData.value))
				let sheng = [];
				let shi = [];
				let qu = [];
				this.origiData.forEach(item => {
					sheng.push(item.name);
					// 设置出初始化的数据
					if (item.name == '董事会') {
						item.children.forEach(child => {
							shi.push(child.name);

							if (child.name == '项目部') {
								child.children.forEach(el => {
									qu.push(el.name);
								});
							}
						});
					}
				});
				this.columns.push(
					JSON.parse(JSON.stringify(sheng)),
					JSON.parse(JSON.stringify(shi)),
					JSON.parse(JSON.stringify(qu))
				);
			},
			changeHandler(e) {
				console.log(e, 333);
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来,只能通过ref操作
					picker = this.$refs.uPicker
				} = e;
				// 当第一列值发生变化时,变化第二列(后一列)对应的选项
				if (columnIndex == 0) {
					// console.log(value)
					// picker为选择器this实例,变化第二列对应的选项
					this.origiData.forEach(item => {
						if (value[0] == item.name) {
							let shi = [];
							let flag = item.children[0];
							if(flag == undefined){
								picker.setColumnValues(1, shi);
								picker.setColumnValues(2, []);
								return
							}
							item.children.forEach((val, ol) => {
								shi.push(val.name);
								if (shi[0] == flag.name) { //设置默认开关(选择省份后设置默认城市)
									flag = '';
									let qu = [];
									val.children.forEach(vol => {
										qu.push(vol.name);
									});
									picker.setColumnValues(2, qu);
								}
							});
							picker.setColumnValues(1, shi);
						}
					});
				}
				//当第二列变化时,第三列对应变化
				if (columnIndex == 1) {
					this.origiData.forEach(item => {
						if (value[0] == item.name) {
							let shi = [];
							item.children.forEach((val, ol) => {
								shi.push(val.name);
								if (value[1] == val.name) {
									let qu = [];
									val.children.forEach(vol => {
										qu.push(vol.name);
									});
									picker.setColumnValues(2, qu);
								}
							});
						}
					});
				}
			},
			// 确认选中的数据
			confirm(e) {
				console.log('confirm', JSON.stringify(e));
				this.value = e.namae[0] + e.namae[1] + e.namae[2]
				this.shows = false;
			},

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

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

相关文章

微服务最佳实践:构建可扩展且高效的系统

微服务架构彻底改变了现代软件开发&#xff0c;提供了无与伦比的敏捷性、可扩展性和可维护性。然而&#xff0c;有效实施微服务需要深入了解最佳实践&#xff0c;以充分发挥微服务的潜力&#xff0c;同时避免常见的陷阱。在这份综合指南中&#xff0c;我们将深入研究微服务的关…

【Vue】vue增加导航标签

系列文章 【Vue】vue增加导航标签 本文链接&#xff1a;https://blog.csdn.net/youcheng_ge/article/details/134965353 【Vue】Element开发笔记 本文链接&#xff1a;https://blog.csdn.net/youcheng_ge/article/details/133947977 【Vue】vue&#xff0c;在Windows IIS平台…

关于pytorch中的dim的理解

今天碰到一个代码看起来很简单&#xff0c;但是细究原理又感觉好像不太通不太对劲&#xff0c;就是多维tensor数据的操作&#xff0c;比如&#xff1a;y.sum(dim2)&#xff0c;乍一看很简单数据相加操作&#xff0c;但是仔细一想&#xff0c;这里在第3维度的数据到底是横向相加…

Python中的继承:概念、用法与示例

目录 一、引言 二、继承的概念 三、继承的用法 1、继承父类的属性和方法 2、添加新的属性和方法 3、覆盖父类的方法 四、示例代码展示 五、继承中的多态性 六、继承中的封装和抽象 七、继承中的多重继承 总结 一、引言 面向对象编程&#xff08;OOP&#xff09;是一…

循环神经网络(1)循环神经网络的记忆能力实验

循环神经网络&#xff08;Recurrent Neural Network&#xff0c;RNN&#xff09;是一类具有短期记忆能力的神经网络&#xff0e;在循环神经网络中&#xff0c;神经元不但可以接受其他神经元的信息&#xff0c;也可以接受自身的信息&#xff0c;形成具有环路的网络结构&#xff…

node加密集合(前端加密、后台解密)

文章目录 一、crypto 加解密生成私密钥公钥加密&#xff08;也可私钥加密&#xff09;私钥解密&#xff08;也可公钥解密&#xff09; 二、node-rsa加解密生成公私秘钥使用公钥加密&#xff08;也可私钥加密&#xff09;使用私钥解密&#xff08;也可公钥解密&#xff09; 三、…

Shell三剑客:正则表达式(元字符)

一、定义&#xff1a;元字符字符是这样一类字符&#xff0c;它们表达的是不同字面本身的含义 二、分类&#xff1a; 1、基本正则表达式元字符 # ^ 行首定位 [rootlocalhost ~]# grep root /etc/passwd root:x:0:0:root:/root:/bin/bash operator:x:11:0:operator:/root:/…

洁丽雅×实在RPA丨用取数宝获取全域经营数据,成本降低80%以上

12月6日&#xff0c;实在智能“实力派数智先锋访谈节”邀请到洁丽雅数据部负责人韩宇轩&#xff0c;围绕“「取数宝」为企业带来效率提升和成本降低”的话题&#xff0c;为线上观众分享了洁丽雅在数字化转型过程中的实践和经验。 洁丽雅组建于2003年&#xff0c;前身是1986年成…

智能客服的应用——政务领域

#本文来源清华大学数据治理研究中心政务热线数智化发展报告 &#xff0c;如有侵权&#xff0c;请联系删除。 面对地方政务热线发展所面临的挑战&#xff0c;数智化转型已经成为了热线系统突破当前发展瓶颈、实现整体提质增效的关键手段。《意见》中也明确指出&#xff0c;政务…

用友 U8总账凭证打印设置

总账--凭证打印——设置 是设置凭证打印显示的格子框&#xff0c;勾上就有框&#xff0c;去掉就没有框。

打印机怎么扫描文件到电脑?6个步骤!轻松完成!

“在工作时我经常需要用到打印机&#xff0c;有时候需要将部分文件扫描到电脑。但是我不是很清楚应该如何操作&#xff0c;有什么方法可以让打印机快速传输文件到电脑的方法吗&#xff1f;” 在人们的工作和学习中&#xff0c;打印机成了很多用户的必备工具。人们可以用它来打印…

swing快速入门(八)

注释很详细&#xff0c;直接上代码 上一篇 新增内容 cardLayout布局管理器 事件监听器的创建与绑定 多种布局与容器的结合使用 import java.awt.*; import java.awt.event.ActionEvent; import java.awt.event.ActionListener;public class swing_test_6 {public static v…

虚幻学习笔记14—重叠和碰撞事件

一、前言 在开发应用当中两个物体的重叠和碰撞事件会经常用到&#xff0c;在虚幻中哲两个有很大的区别&#xff0c;在官方文档碰撞概述其实已经讲了怎样发生碰撞和重叠&#xff0c;但是还是遗漏不少注意事项合细节&#xff0c;主要文档写的太粗糙了&#xff0c;这也让我在使用的…

线性回归问题

目录 一、线性回归关键思想 1、线性模型 2、基础优化算法 二、线性回归的从零开始实现 1、生成数据集 2、读取数据集 3、初始化模型参数 4、定义模型 5、定义损失函数 6、定义优化算法 7、训练 三、线性回归的简洁实现 1、生成数据集 2、读取数据集 3、定义模型…

虚拟机/etc/fstab 变更只读模式ready-only处理

虚拟机误操作将/etc/fstab中的根目录注释掉了&#xff0c;重启虚机后虚机可以正常启动&#xff0c;但无法进行修改 # vi /etc/fstab 提示文件只读 无法进行操作 解决办法&#xff1a; 1、重启虚机&#xff0c;按e进入单用户模式 2、修改内核所在那行参数&#xff0c;将ro 修…

往上走^^

欢迎来到程序小院 往上走 玩法&#xff1a;转动的圆球&#xff0c;点击固定到上方的圆中即可往上走一步&#xff0c;转动超过上面圆即游戏结束&#xff0c; 往上走一步加1分&#xff0c;快去往上走吧^^。开始游戏https://www.ormcc.com/play/gameStart/218 html <canvas wi…

【CCF BDCI 2023】多模态多方对话场景下的发言人识别 Baseline 0.71 Slover 部分

【CCF BDCI 2023】多模态多方对话场景下的发言人识别 Baseline 0.71 Slover 部分 概述Solver 在多模态发言人识别中的作用Solver 在多模态发言人识别中的重要性Solver 的工作原理 二次规划二次规划的基本形式二次规划的特点二次规划在多模态发言中的应用 (我的理解) 代码详解数…

单端反激(离散系统仿真)

单端反激&#xff08;离散系统仿真&#xff09; 指令电压为0,电机微速旋转,补足指令电压。 把仿真变成离散的。 最大步长设置方法&#xff1a;如果是对于相控形式的电路&#xff0c;我觉得设置1e-4秒大概就够了&#xff0c;如果是对于斩波形式的电路&#xff0c;设置1e-6或者…

oracle数据恢复—Oracle报错“system01.dbf需要更多的恢复来保持一致性”的数据恢复案例

oracle数据库恢复环境&故障&#xff1a; 一台Windows server操作系统的服务器上部署Oracle数据库。 服务器意外断电导致oracle数据库报错&#xff0c;报错信息&#xff1a;“system01.dbf需要更多的恢复来保持一致性”。由于该oracle数据库并没有备份&#xff0c;仅有一些断…

JS数组与它的42个方法

前言 数组在js中作为一个非常重要的类型之一&#xff0c;在我们对数据处理&#xff0c;存储数据&#xff0c;条件渲染的时候经常会用到&#xff0c;所以随着ES的不断更新&#xff0c;数组的方法也是越来越多&#xff0c;也让我们使用数组对数据操作的时候&#xff0c;越来越简…