uni-app 多列picker切换列显示对应内容

html部分:

	<view class="uni-list">
				<view class="uni-list-cell">
					<view class="uni-list-cell-left">
						选择用户
					</view>
					<view class="uni-list-cell-db">
						<picker mode="multiSelector" @columnchange="bindMultiPickerColumnChange" :value="multiIndex"
							:range="multiArray">
							<view class="uni-input">
								{{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}}
							</view>
						</picker>
					</view>
				</view>
			</view>

要先将后端传回的数据做个处理 :

generateMultiArray() {
				const branchNames = [...new Set(this.userList.map(user => user.branchName))]; // 获取所有不同的 branchName
				this.userNameByBranch = []; // 根据 branchName 分组 userName

				branchNames.forEach(branch => {
					this.userNameByBranch[branch] = this.userList
						.filter(user => user.branchName === branch)
						.map(user => user.userName);
				});
				console.log('userNameByBranch', this.userNameByBranch)
				// 构建 multiArray
				const multiArray = [
					branchNames,
					this.userNameByBranch
				];
				
				this.multiArray = multiArray;
				
				this.bindMultiPickerColumnChange({ detail: { column: 0, value: 0 } }); // 设置默认选择
			},

后端返回的数据格式如下 "list": [
            {
                "userId": 1,
                "userName": "王三",
                "branchName": "软件部"
            },
            {
                "userId": 2,
                "userName": "李四",
                "branchName": "软件部"
            },
            {
                "userId": 3,
                "userName": "赵六",
                "branchName": "软件部"
            },
            {
                "userId": 4,
                "userName": "王齐",
                "branchName": "软件部"
            },
            {
                "userId": 4,
                "userName": "发寒热",
                "branchName": "项目部"
            },
            {
                "userId": 4,
                "userName": "王总",
                "branchName": "总经理"
            }
        ]

然后写切换逻辑:


			bindMultiPickerColumnChange(e) {
				console.log('修改的列为:' + e.detail.column + ',值为:' + e.detail.value)
				this.multiIndex[e.detail.column] = e.detail.value

				// 如果修改的是第一列
				if (e.detail.column === 0) {
					// 获取用户选择的分支名称
					const selectedBranch = this.multiArray[0][e.detail.value];

					// 根据选择的分支名称更新第二列的值
					const userNameArray = this.userNameByBranch[selectedBranch] || []; // 获取对应分支名称的用户名数组

					// 更新第二列的值为对应的用户名数组
					this.multiArray[1] = userNameArray;

					// 重置第二列的选择索引为0
					this.multiIndex[1] = 0;
				}

				// 强制更新视图
				this.$forceUpdate();
			},

css部分:

.uni-list {
		background-color: #f6f6f6;
		position: relative;
		width: 96%;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
	}

	.uni-list:after {
		position: absolute;
		z-index: 10;
		right: 0;
		bottom: 0;
		left: 0;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: white;
	}

	.uni-list-cell {
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.uni-list-cell-left {
		white-space: nowrap;
		font-size: 28rpx;
		padding: 0 30rpx;
	}

	.uni-list-cell-db {
		flex: 1;
	}

	.uni-input {
		height: 50rpx;
		padding: 15rpx 25rpx;
		line-height: 50rpx;
		font-size: 28rpx;
		background: #f6f6f6;
		flex: 1;
	}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【JavaWeb】网上蛋糕商城后台-类目管理,退出

概念 本文讲解和实现类目管理和管理员的退出功能。 类目列表信息 点击类目管理&#xff0c;向服务器发送请求/admin/type_list 在servlet包中创建AdminTypeListServlet类&#xff0c;获得所有商品分类 package servlet;import model.Type; import service.TypeService;impo…

网站localhost和127.0.0.1可以访问,本地ip不可访问解决方案

部署了一个网站, 使用localhost和127.0.0.1加端口号可以访问, 但是使用本机的ip地址加端口号却不行. 原因可能有多种. 可能的原因: 1 首先要确认是否localhost对应的端口是通的(直接网址访问), 以及你无法访问的那个本机ip是否正确(使用ping测试)&#xff1b; 2 检查本机的防火…

堆的基本操作(c语言实现)

1.堆的基本操作 1.1定义堆 typedef int HPDataType;//堆中存储数据的类型typedef struct Heap {HPDataType* a;//用于存储数据的数组int size;//记录堆中已有元素个数int capacity;//记录堆的容量 }HP;1.2初始化堆 然后我们需要一个初始化函数&#xff0c;对刚创建的堆进行初…

软件测试开发之 职业发展必备 能力模型解析

为什么要了解能力模型 王阳明曾在《传习录》中提到过一个思想&#xff1a;以终为始。所谓“以终为始”&#xff0c;意味着在行动的开始阶段就要考虑到最终的目标和结果&#xff0c;以此来指导自己的行动和选择。那么如果我们想在自己的行业内获取好的职业发展&#xff0c;第一…

Meta更低的训练成本取得更好的性能: 多token预测(Multi-Token Prediction)

Meta提出了一种透过多token预测(Multi-token Prediction)来训练更好、更快的大型语言模型的方法。这篇论文的重点如下: 训练语言模型同时预测多个未来的token,可以提高样本效率(sample efficiency)。 在推论阶段,使用多token预测可以达到最高3倍的加速。 论文的主要贡献包括: …

2024年Delphi自学培训网络资源

概述 Delphi 是一种基于 Object Pascal 的面向对象编程语言。最初&#xff0c;Delphi 是作为构建 Windows 应用程序的工具而创建的&#xff0c;并于 1995 年发布。从那时起&#xff0c;这些技术向前迈出了一大步&#xff0c;Delphi也不例外。尽管第一个用 Delphi 编写的应用程…

Windows 10 中使用 Montreal-Forced-Aligner (MFA) 实现音频和文本强制对齐

文章目录 一、实现目标二、安装 Montreal-Forced-Aligner1、使用 Anaconda 虚拟环境2、修改默认下载路径3、安装 montreal-forced-aligner 及相关第三方包4、验证是否安装成功 三、下载声学模型和发音词典1、命令行方式下载2、手动方式下载 四、强制对齐1、准备音频及对应文本2…

docker学习笔记(三)搭建NFS服务实验

目录 什么是NFS 简单架构​编辑 一.搭建nfs服务器 二.新建共享目录和网页文件 三.设置共享目录 四&#xff1a;创建使用nfs共享目录的卷 五&#xff1a;创建容器使用nfs-web-1卷 六&#xff1a;测试访问 七&#xff1a;是否同步测试 什么是NFS NFS 服务器&#xff1a;ne…

人工智能将改变科研?从胰腺癌早筛到新药研发

去年底英国《自然》杂志刊文预测的2024年十大科学进展中&#xff0c;人工智能的进步和ChatGPT人工智能占据前两位。那么&#xff0c;人工智能对于科学而言&#xff0c;它的哪些成果将带来有益的发展&#xff1f;今天我们请知名科普作者张田勘来聊聊这个话题。 &#xff08;1&am…

万兆以太网MAC设计(13)主机与FPGA之间进行PING

文章目录 前言&#xff1a;一、ICMP校验和计算二、上板效果1、终端命令行1、wireshark捕捉 前言&#xff1a; 在上板尝试进行PING操作的时候&#xff0c;发现一直是请求超时的情况&#xff0c;结果排查发现是首部校验和没有计算的问题。在UDP层&#xff0c;我们不进行校验和是…

ReentrantReadWriteLock源码分析

ReentrantReadWriteLock是基于AQS实现的读写锁&#xff0c;读锁与读锁不互斥、读锁与写锁互斥、写锁与写锁互斥。 类的继承关系 AQS提供了共享和排它两种模式&#xff0c;acquire/release、acquireShared/releaseShared 是AQS里面的两对模板方法。写锁是排它模式基于acquire/…

Yii2 自动生成php代码

文档地址&#xff1a;入门&#xff08;Getting Started&#xff09;: 用 Gii 生成代码&#xff08;Generating Code with Gii&#xff09; - Yii 2.0 权威指南 - 文档 - Yii Framework 中文网 找到配置文件&#xff0c;以我的项目为例&#xff1a; 因为的是开启了路由美化所以访…

在线扭蛋机小程序:商家稳占市场的新突破口

近几年&#xff0c;扭蛋机进入了爆发期&#xff0c;动漫、游戏的发展更是推动了市场的发展&#xff0c;我国扭蛋机正在蓬勃发展中。 不过&#xff0c;在市场规模扩大下&#xff0c;扭蛋机行业的竞争力也在同时加大&#xff0c;企业商家需要在市场竞争中寻求发展新思路&#xf…

开源推荐榜【FunClip是一款完全开源、本地部署的自动化视频剪辑工具】

FunClip是一款完全开源、本地部署的自动化视频剪辑工具&#xff0c;通过调用阿里巴巴通义实验室开源的FunASR Paraformer系列模型进行视频的语音识别&#xff0c;随后用户可以自由选择识别结果中的文本片段或说话人&#xff0c;点击裁剪按钮即可获取对应片段的视频&#xff08;…

基于EBAZ4205矿板的图像处理:12图像二值化(阈值可调)

基于EBAZ4205矿板的图像处理&#xff1a;12图像二值化(阈值可调) 我的项目是基于EBAZ4205矿板的阈值可调的图像阈值二值化处理&#xff0c;可以通过按键调整二值化的阈值&#xff0c;key1为阈值加1&#xff0c;key4为阈值减1&#xff0c;key2为阈值加10&#xff0c;key5为阈值…

【AI+音视频总结】如何在几分钟内用智能工具摘取音视频精华?揭秘下一代学习和内容创作神器!

今天无意发现一个网站&#xff0c;可以一步到位完成AI音视频总结。 我之前对于音视频总结的步骤还是借助 工具下载 剪映来完成的。详情可以参考之前写的一篇文章 【AI应用】模仿爆款视频二次创作短视频操作步骤 。 这里介绍的网站是 BibiGPT 。 BibiGPT AI 音视频助理 - 它是…

构建第一个ArkTS应用之@AppStorage:应用全局的UI状态存储

AppStorage是应用全局的UI状态存储&#xff0c;是和应用的进程绑定的&#xff0c;由UI框架在应用程序启动时创建&#xff0c;为应用程序UI状态属性提供中央存储。 和AppStorage不同的是&#xff0c;LocalStorage是页面级的&#xff0c;通常应用于页面内的数据共享。而AppStora…

VMare Workstation安装ubuntu虚拟机异常问题处理

安装方法 ubuntu官网下载插件 异常处理 开启时报错"unable to proceed without a log file" 遇到此问题的都有一个共同点&#xff0c;工作目录路径上都带了数字&#xff0c;比如"Ubuntu 64位 01"&#xff0c;解决方法为&#xff1a; 选中"Ubuntu 64位…

可视化大屏的应用:电子政务领域的巨大应用价值

可视化大屏在电子政务领域的应用价值主要体现在以下几个方面&#xff1a; 数据监控与分析 可视化大屏可以将政务数据以图表、地图等形式展示在大屏上&#xff0c;帮助政府部门实时监控和分析各项指标和数据变化。例如&#xff0c;可以实时显示人口统计、经济指标、环境监测等…

利用“AnaTraf“网络流量分析仪轻松诊断和优化网络

网络性能监测和诊断(NPMD)是网络管理和优化的重要环节,准确快速地定位和排除网络故障对于保障业务正常运转至关重要。作为一款专业的网络流量分析设备,AnaTraf网络流量分析仪凭借其强大的流量分析和故障诊断功能,为网络管理者提供了一个高效的网络优化解决方案。 全面掌握网络…
最新文章