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

news2024/12/24 0:11:12

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.coloradmin.cn/o/1651951.html

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

相关文章

python绘制等高线函数参数说明

文章目录 函数说明参数说明返回值示例生成双峰山体数据代码案例生成三维的空间双峰山形函数 plt.contour 是 Matplotlib 库中的一个函数&#xff0c;用于绘制等高线图。等高线图是一种特殊的地图&#xff0c;其中等高线表示相同高度的等值线。 函数说明 matplotlib.pyplot.co…

2024年四川省中小企业数字化转型城市试点申报对象要求、时间安排

一、重点任务 &#xff08;一&#xff09;聚焦企业需求&#xff0c;加快中小企业数字化转型。以中小企业数字化转型为契机&#xff0c;促进数字经济和实体经济深度融合。优先将数字化转型需求迫切、具备一定数字化基础的专精特新中小企业纳入试点范围。围绕中小企业创新、市场…

【BUUCTF】Crypto_RSA(铜锁/openssl使用系列)

【BUUCTF】Crypto_RSA&#xff08;铜锁/openssl使用系列&#xff09; 1、题目 在一次RSA密钥对生成中&#xff0c;假设p473398607161&#xff0c;q4511491&#xff0c;e17 求解出d作为flga提交 2、解析 RSA加密过程&#xff1a; 1&#xff09;选择素数&#xff1a;选择两个不…

AI绘画是什么?分享11张精美的AI绘画图片

AI绘画是什么&#xff1f; AI绘画是指利用人工智能技术来生成艺术作品的一种创作方式。通过训练机器学习算法&#xff0c;使计算机能够学习艺术家的风格和技巧&#xff0c;并自动生成类似的绘画作品。这种技术可以模仿各种绘画风格&#xff0c;如印象派、抽象艺术、写实主义等&…

Shopify如何安装Google Search Console

1&#xff0c;注册google search console账号 注册链接 https://search.google.com/search-console/about 2&#xff0c;输入网址 有两种方式&#xff0c;&#xff0c;都可使用&#xff0c;看个人习惯&#xff0c;我这边后续使用网址前缀来操作 3&#xff0c;填写网址后点击继…

618购物狂欢有哪些值得买的?五款心水好物真实分享!

618购物狂欢即将到来&#xff0c;你是不是已经迫不及待地期待着各种优惠和折扣&#xff1f;在这个充满购物狂欢的时刻&#xff0c;大家可能会犹豫在众多商品中该如何选择。不用担心&#xff01;我已经为大家精心挑选了五款心水好物&#xff0c;并进行了真实的分享&#xff0c;帮…

【C#】DateTime类型数组含有null?并排序

代码 internal class Program{static void Main(string[] args){List<DateTime?> dateTimes new List<DateTime?> { null,DateTime.MinValue,DateTime.MaxValue};var temp new List<DateTime?> { };dateTimes.Sort();//dateTimes.Reverse();foreach (va…

基于springboot的校园食堂订餐系统

文章目录 项目介绍主要功能截图&#xff1a;部分代码展示设计总结项目获取方式 &#x1f345; 作者主页&#xff1a;超级无敌暴龙战士塔塔开 &#x1f345; 简介&#xff1a;Java领域优质创作者&#x1f3c6;、 简历模板、学习资料、面试题库【关注我&#xff0c;都给你】 &…

如何保护数据安全?迅软DSE加密系统给信息撑把保护伞!

信息安全当然需要保护&#xff0c;不然企业的信息可以发给任何人&#xff0c;普通信息还好&#xff0c;如果是重要机密呢&#xff0c;企业重要信息被发出去后可能会造成一些麻烦&#xff0c;所以可以使用加密系统&#xff0c;对数据进行安全保护&#xff0c;防止泄密问题&#…

vue脚手架和vite创建的项目的环境配置

开发环境文件 .env.development NODE_ENV"development" # // 开发接口域名 本地测试就用这个 # vue脚手架创建的 VUE_APP_MODE"开发环境" VUE_APP_API_URL http://19527 # vite创建的 # VITE_MODE"开发环境" # VITE_BASE_URL http://1920:9527…

详解:牵牛易帮-免费知识库工具的弊端

众所周知&#xff0c;知识库工具已成为企业必不可少的一部分&#xff0c;它们可以提升工作效率、优化客户体验。牵牛易帮作为一款免费的知识库工具&#xff0c;吸引了众多小微企业和个人用户。然而&#xff0c;免费是有两面性的&#xff0c;牵牛易帮也不例外。本文将对牵牛易帮…

等离子刻蚀中的化学键是如何断裂与生成的?

知 识星球&#xff08;星球名&#xff1a; 芯片制造与封测社区&#xff0c;星球号&#xff1a; 63559049&#xff09;里的学员问&#xff1a; 我看 到一本书上 说刻蚀SiO2需要C&#xff0c;这个C会和SiO2中的O结合。 较弱的 si和f结合从而被刻蚀。 但是另一本书上写Si…

封装一个可以最小化和展开的弹窗组件

gl-dialog 大概思路&#xff1a; 在弹窗组件内部引入gl-dialog-collapse&#xff0c;这个组件主要用于存储已经被最小化的弹窗&#xff08;基础数据&#xff09; 弹窗内部的数据如何在父组件拿到是通过作用域插槽来实现的 gl-dialog接收一个tempData这个数据会在内部被记录下来…

Gen-2颠覆AI生成视频!一句话秒出4K高清大片,网友:彻底改变游戏规则

这&#xff0c;绝对称得上是生成式AI进程中的里程碑。 就在深夜&#xff0c;Runway家标志性的AI视频生成工具Gen-2&#xff0c;迎来了“iPhone时刻”般的史诗级更新—— 依旧是简单一句话输入&#xff0c;不过这一次&#xff0c;视频效果一口气拉到了4K超逼真的高度&#xff…

WordPress原创插件:当日24小时发布文章标题变红

WordPress原创插件&#xff1a;当日24小时发布文章标题变红 <?php// 添加自定义样式 function title_red_plugin_styles() {$current_time time();$post_time get_the_time(U);$time_difference $current_time - $post_time;if ($time_difference < 86400) {echo&l…

【doghead】mac与wsl2联通

mbp 设置为发送端,那么要能与windows上 wsl2的ubutnu通信。 mbp的 uv 构建ok zhangbin@zhangbin-mbp-2  ~/tet/Fargo/zhb-bifrost/Bifrost-202403/worker/third_party/libuv   main clion使用lldb cmake构建 更新git2.45.0啊

无人机+垂直起降:微型共轴双旋翼无人机技术详解

微型共轴双旋翼无人机技术是一种独特的无人机设计&#xff0c;它结合了垂直起降&#xff08;VTOL&#xff09;能力和微型无人机的灵活性。这种设计允许无人机在无需跑道的情况下垂直起降&#xff0c;并具备在空中悬停和执行各种飞行动作的能力。 适用于集群控制&#xff0c;荷载…

SAP-ABAP-操作透明表06

1、操作透明表-查询 查询0条数据只做判断 SELECT COUNT(*) FROM ZHY_XYXX_01 WHERE ZBJ = 202404. IF SY-SUBRC = 0. WRITE 班级存在. ELSE. WRITE 班级不存在. ENDIF. 查询一条数据 *查询一条数据 SELECT SINGLE ZBJ, ZXH INTO @GS_Z…

【数据库原理及应用】期末复习汇总高校期末真题试卷07

试卷 一、填空题&#xff08;每空1分&#xff0c;共10分&#xff09; 1.数据库管理系统在外模式、模式和内模式这三级模式之间提供了两层映象&#xff0c;其中 映象保证了数据的逻辑独立性。 2. 数据模型通常由 、数据操作和完整性约束三部分组…

不盖CNAS的证书就是无效的?证书哪些信息是“非必要”?

做设备校准的企业&#xff0c;大多数都是为了拿到仪器校准证书&#xff0c;而说起校准证书&#xff0c;很多人优先就是想到CNAS&#xff0c;CNAS作为校准行业重要的核心资质&#xff0c;无论是校准机构实力的证明&#xff0c;还是满足企业年审的需要&#xff0c;基本上都是关键…