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://www.mzph.cn/web/8795.shtml

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

相关文章

【密评】 | 商用密码应用安全性评估从业人员考核题库(5/58)

我国金融信息系统、第二代居民身份证管理系统、国家电力信息系统、社会保障信息系统、全国中小学学籍管理系统中&#xff0c;都应用&#xff08;&#xff09;技术构建了密码保障体系。 A. 核心密码 B. 普通密码 C. 商用密码 D. 核心密码和普通密码 商用密码从业单位开展商用密…

【VUE】el-descriptions 描述列表

Descriptions 描述列表 列表形式展示多个字段。 <el-descriptions title"用户信息"><el-descriptions-item label"用户名">kooriookami</el-descriptions-item><el-descriptions-item label"手机号">18100000000</e…

学习3:scrapy请求对象、模拟登录、POST请求、管道的使用、crawlspider爬虫类

请求对象 请求对象参数 scrapy.Request(url[],callback,method"GET",headers,body,cookies,meta,dont_filterFalse)callback 表示当前的url响应交给那个函数去处理method 指定请求方式headers 接受一个字典&#xff0c;其中不包括cookiesbody 接收json字符串&#…

uniapp读取项目本地文件/json文件/txt文件

uniapp读取项目本地文件/json文件/txt文件 文件必须放在static目录下 方法&#xff1a; /*** 访问static里面的文件* param url 文件路径 必须在static目录下*/ function localFetch(url) {return new Promise((resolve, reject) > {plus.io.resolveLocalFileSystemURL(_ww…

阿里云VOD视频点播流程(2)

二、视频点播 1、入门代码 基于OSS原生SDK上传 &#xff0c;参考文档&#xff1a;https://help.aliyun.com/zh/vod/user-guide/upload-media-files-by-using-oss-sdks?spma2c4g.11186623.0.0.1f02273fj4lxNJ 视频点播面向开发者提供了丰富的上传方式&#xff0c;其中上传SDK&…

从零开始的软件测试学习之旅(八)jmeter线程组参数化及函数学习

jmeter线程组参数化及函数学习 Jmeter基础基本使用流程组件与元件 线程组线程的执行方式Jmeter组件执行顺序 常见属性设置查看结果数的作用域举例 Jmeter参数化实现方式1.用户定义参数2.用户参数3.函数4.csv数据文件设置 每日复习 Jmeter基础 基本使用流程 启动项目案例 启动…

DUX 主题 版本:8.2 WordPress主题优化版

主题下载地址&#xff1a;DUX 主题优化版.zip 支持夜间模式、快讯、专题、百度收录、人机验证、多级分类筛选&#xff0c;适用于垂直站点、科技博客、个人站&#xff0c;扁平化设计、简洁白色、超多功能配置、会员中心、直达链接、自动缩略图

添砖Java之路其三——自增自减运算符,数据转换与原码反码补码。

目录 运算符&#xff1a; 转换&#xff1a; 隐式转换&#xff1a; 小范围数据可以直接可以给大范围数据&#xff1a; 这里做了一张图范围向下兼容表​编辑 运算时&#xff0c;数据范围小的和数据范围大的&#xff0c;需要讲运算范围小的提升为运算范围大的同类&#xff0c…

全球AI新闻速递

&#x1f4e2;&#x1f4e2;&#x1f4e2;&#x1f4e3;&#x1f4e3;&#x1f4e3; 哈喽&#xff01;大家好&#xff0c;我是「奇点」&#xff0c;江湖人称 singularity。刚工作几年&#xff0c;想和大家一同进步&#x1f91d;&#x1f91d; 一位上进心十足的【Java ToB端大厂…

C/C++开发,opencv-features2d模块,SIFT等特征检测器应用

目录 一、OpenCV-features2d 模块简介 1.1 features2d 模块信息 1.2 features2d 模块应用流程 二、features2d 模块编码案例 2.1 实现逻辑 2.2 features2d 模块应用程序代码 2.3 程序编译及运行 一、OpenCV-features2d 模块简介 1.1 features2d 模块信息 features2d 是…

炒美股怎么开户?

近年来&#xff0c;随着国内投资者对境外投资需求的不断增长&#xff0c;炒美股逐渐成为许多投资者的选择。然而&#xff0c;随着监管政策的不断完善&#xff0c;传统的互联网券商开户方式已经不再适用。那么&#xff0c;对于想要入场美股市场的投资者来说&#xff0c;该如何开…

Angular中的路由

Angular中的路由 文章目录 Angular中的路由前言一、创建路由二、创建多个组件路由三、创建子路由四、创建多个组件子路由 前言 在Angular中&#xff0c;路由是用于在不同的视图和组件之间导航的机制。Angular提供了一种强大的路由机制来管理单页应用&#xff08;SPA&#xff0…

vue2项目升级到vue3经历分享4

后端重构&#xff0c;如果接口做好抽象封装&#xff0c;只需要考虑jar之间的兼容性问题&#xff0c;jdk版本不变&#xff0c;基本不用做太大的调整&#xff0c;但是前端就不一样&#xff0c;除了vue框架本身&#xff0c;css的调整&#xff0c;改起来更是让人头疼。前面写了vue2…

Android 开机启动扫描SD卡apk流程源码分析

在开机的时候&#xff0c;装在SD卡的apk和装在系统盘的apk扫描过程不一样&#xff0c;系统盘apk在系统启动过程中扫描&#xff0c;而SD卡上的就不是&#xff0c;等系统启动好了才挂载、扫描&#xff0c;下面就说下SD扫描的流程&#xff1a; 在SystemServer启动MountService&am…

【Hadoop】MapReduce (七)

MapReduce 执行流程 MapTask执行流程 Read&#xff1a;读取阶段 MapTask会调用InputFormat中的getSplits方法来对文件进行切片切片之后&#xff0c;针对每一个Split&#xff0c;产生一个RecordReader流用于读取数据数据是以Key-Value形式来产生&#xff0c;交给map方法来处理…

02_SpringBoot程序快速启动

目录 打包命令启动启动成功测试结果 打包 点击package打包命令&#xff0c;会生成target目录&#xff0c;目录下会有生成的jar包 命令启动 打开cmd命令窗口&#xff0c;进入子项目的target目录下,输入命令后&#xff0c;回车… java -jar .\note-boot-core-1.0-SNAPSHOT.j…

C++新手村指南:入门基础

目录 C概念 C发展史 C关键字&#xff08;C98&#xff09; 命名空间 命名空间的定义 命名空间的使用 C中的输入&&输出 缺省参数 缺省参数的概念 缺省参数的分类 函数重载 函数重载概念 函数重载实现 引用 引用的概念 引用的特性 常引用 引用的使用场景…

【Python图像分类系列】建立CNN模型实现猫狗图像分类(案例+源码)

这是我的第275篇原创文章。 一、引言 基于CNN卷积神经网络在图像识别领域的应用&#xff1a;猫狗图像识别。主要内容包含&#xff1a; 数据创建和预处理 神经网络模型搭建 神经网络模型的训练和拟合 文中使用的深度学习框架是Keras。部分数据展示&#xff1a; 猫&#xf…

基于opencv的车辆统计

车辆统计&#xff09; 一、项目背景二、整体流程三、常用滤波器的特点四、背景减除五、形态学开运算闭运算 六、项目完整代码七、参考资料 一、项目背景 检测并识别视频中来往车辆的数量 最终效果图&#xff1a; 二、整体流程 加载视频图像预处理&#xff08;去噪、背景减除…

C++类和对象中篇

&#x1f407; &#x1f525;博客主页&#xff1a; 云曦 &#x1f4cb;系列专栏&#xff1a;[C] &#x1f4a8;路漫漫其修远兮 吾将而求索 &#x1f49b; 感谢大家&#x1f44d;点赞 &#x1f60b;关注&#x1f4dd;评论 文章目录 &#x1f4d4;前言&#x1f4d4;1、类的六个…