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))]; // 获取所有不同的 branchNamethis.userNameByBranch = []; // 根据 branchName 分组 userNamebranchNames.forEach(branch => {this.userNameByBranch[branch] = this.userList.filter(user => user.branchName === branch).map(user => user.userName);});console.log('userNameByBranch', this.userNameByBranch)// 构建 multiArrayconst 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;// 重置第二列的选择索引为0this.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://xiahunao.cn/news/3018979.html

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

相关文章

【设计模式】之观察者模式

系列文章目录 【设计模式】之装饰器模式【设计模式】之工厂模式&#xff08;三种&#xff09;【设计模式】之工厂模式&#xff08;三种&#xff09; 前言 今天给大家介绍另一种设计模式--观察者模式&#xff0c;有了解webscoket实现原理的小伙伴应该对这个设计模式不陌生。不清…

618有什么值得入手的电器?618家电狂欢不容错过的电器分享!

618电器节&#xff0c;作为年中最大的购物狂欢之一&#xff0c;汇聚了众多知名品牌和优质产品&#xff0c;为您提供了丰富的选择和超值的优惠。无论是您家中急需更换的老旧电器&#xff0c;还是您心仪已久的高端智能家电&#xff0c;都能在这个节日里找到心仪的选择。在这里&am…

手把手教数据结构与算法:有序线性表设计(表合并)

个人主页&#xff1a; 想转码的电筒人 专栏&#xff1a; 手把手教数据结构与算法 文章目录 有序线性表 概念 结构 问题描述 输入 输出 样例 解题步骤 结点类 链表类 insert函数 printAll函数 merge函数 test函数 完整代码 有序线性表 概念 单链表是一种物…

面试题:返回倒数第k个节点(简单)

面试题&#xff1a;返回倒数第k个节点&#xff08;简单&#xff09; 面试题 02.02. 返回倒数第 k 个节点 - 力扣&#xff08;LeetCode&#xff09;https://leetcode.cn/problems/kth-node-from-end-of-list-lcci/description/ 这一题是很简单的当做试手题 题目 题目分析 1&…

hive日常使用时忘记部分补充(不定时)

1、date_formate、unix_timestamp、from_unixtime用法&#xff1a; 2、lag&#xff08;&#xff09;、lead()用法&#xff1a; lag&#xff08;)窗口函数返回分区中当前行之前行&#xff08;可以指定第几行&#xff09;的值。 如果没有行&#xff0c;则返回null。 lead()窗口…

windows端口复用

1. 概述 使用 HTTP.sys 中的 Net.tcp Port Sharing 服务&#xff0c;配合 WinRM 实现端口复用。 优点&#xff1a; HTTP.sys 为 windows 原生机制&#xff0c; WinRM 为 windows 自带功能&#xff0c;动作较小&#xff0c;不易触发主 动防御。 需要管理员权限。 2. 原理 (…

定时任务相关:克戎表达式

克戎表达式的历史和概念 克戎表达式&#xff08;Cron Expression&#xff09;是一种用于表示定时任务的字符串格式&#xff0c;在计算机领域被广泛应用。它的历史可以追溯到UNIX系统&#xff0c;最早由Brian Kernighan与其他UNIX开发者在1970年代末和1980年代初开发。 克戎表…

matlab绘制时间序列图,横坐标轴如何标注为月-日

Excel表格中有类似于如下 年月日对应的数据 导入 matlab中&#xff0c;为数值矩阵&#xff1b;了解该表格中的时间跨度为从2021年1月2日至2021年12月31日&#xff0c;中间没有缺失&#xff0c;绘图代码&#xff1a; % clear; timespan1[20210102 20211231]; datenn1datenum(da…

[虚拟机+单机]梦幻契约H5修复版_附GM工具

本教程仅限学习使用&#xff0c;禁止商用&#xff0c;一切后果与本人无关&#xff0c;此声明具有法律效应&#xff01;&#xff01;&#xff01;&#xff01; 教程是本人亲自搭建成功的&#xff0c;绝对是完整可运行的&#xff0c;踩过的坑都给你们填上了 视频演示 [虚拟机单…

关于电商API接口【满足高并发大批量请求】||电商API接口入门指南

简介&#xff1a; API&#xff08;应用程序编程接口&#xff09;是一种让不同软件之间进行通信的方式。在电子商务中&#xff0c;电商API接口可以用于获取商品信息、下单、支付等等。本篇文章将介绍电商API接口的入门知识&#xff0c;并提供示例代码以帮助你快速上手。 一、了解…

一路串联电机的绕制原理

这里要说明的一点是 对于一路串联的电机&#xff0c;无论是一把线圈还是两把线圈&#xff0c;出来的都是只有两个线头&#xff0c;可看做一个整体来对待&#xff01; 绕制具体原理 同心式线圈绕制 前面说的都是等距式的 线圈绕制&#xff0c;下面我们讲解一下同心式的绕制办法…

【自动驾驶|毫米波雷达】逻辑化讲解测角全流程

第一次更新&#xff1a;2024/5/7 目录 一. 引入 基础概念 二. 测角原理 1. 接收天线不同位置 2. 角度几何关系 3. 角度正负规定 4. 角度测量 5. 最大不模糊角 三. 角度分辨率 1. 相位变化量 2. 角度表示 3. 角度变化量 三. 测角算法 1. 三维快速傅里叶变换 (3D-FFT&…

广州厂房工业冷风机如何通风降温呢?

工业冷风机通过以下方式实现通风降温&#xff1a;风力循环&#xff1a;工业冷风机通过强力的风扇系统产生强大的风力&#xff0c;这个风力循环可以有效地将热量从工作区域带走。具体来说&#xff0c;它可以将室内热空气吹出&#xff0c;同时带入室外的新鲜空气。这种持续的空气…

五款加密软件的对比分析|加密软件怎么选

从企业防泄密角度来说&#xff0c;加密软件是最有效的解决方案之一&#xff0c;通过对内部核心文档、图纸、代码、视频等各类文件进行加密。可以有效防止文件外发泄密、窃取、设备丢失导致的数据泄露。 下面主要对五款加密软件进行对比分析&#xff0c;帮助你快速选择一个适合…

|Python新手小白中级教程|第二十三章:列表拓展之——元组

文章目录 前言一、列表复习1.索引、切片2.列表操作字符3.数据结构实践——字典 二、探索元组1.使用索引、切片2.使用__add__((添加元素&#xff0c;添加元素))3.输出元组4.使用转化法删除元组指定元素5.for循环遍历元组 三、元组VS列表1.区别2.元组&#xff08;tuple&#xff0…

.NET邮箱API发送邮件的步骤?怎么配置API?

.NET邮箱API发送邮件需要注意哪些&#xff1f;如何使用API发信&#xff1f; 在.NET环境中&#xff0c;使用邮箱API发送邮件是一个常见的需求。无论是企业级的邮件通知&#xff0c;还是个人项目中的邮件验证&#xff0c;都少不了.NET邮箱API的帮助。下面&#xff0c;AokSend将详…

【从零开始学架构 架构基础】架构设计的本质、历史背景和目的

本文是《从零开始学架构》的第一篇学习笔记&#xff0c;主要理解架构的设计的本质定义、历史背景以及目的。 架构设计的本质 分别从三组概念的区别来理解架构设计。 系统与子系统 什么是系统&#xff0c;系统泛指由一群有关联的个体组成&#xff0c;根据某种规则运作&#…

领域驱动设计架构演进

领域驱动设计由于其强调对领域的深入理解和关注业务价值,其架构演进依赖于领域的变化和特定领域中的技术实践。 初始阶段 一个单体架构,所有的功能都集成在一个应用程序中,领域模型可能还不完全清晰,甚至并未形成。这个阶段主要是为了验证产品的可行性,快速迭代并尽快推…

mysql查询表信息(表名、表结构、字段信息等)

MySQL中&#xff0c;您可以使用以下SQL查询数据库的表信息或者某个表中具体的信息&#xff0c;例如&#xff1a;字段、字段描述、索引等&#xff0c;以下为具体的SQL&#xff1a; 1、查询数据库所有表信息&#xff08;表名/表描述&#xff09; SELECTtable_name name,TABLE_C…

在Altium Designer 实现元器件旋转45°放置

在Preferences >> PCB Editor >> General中将Rotation Step&#xff08;旋转的步进值&#xff09;由90改为45&#xff0c;这样以后每次按空格键旋转器件时旋转角度为45。