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.hqwc.cn/news/689167.html

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

相关文章

Day 44 完全背包理论基础 518. 零钱兑换 II 377. 组合总和 Ⅳ

完全背包理论基础 ​ 完全背包和0-1背包的最大区别在于完全背包里的每个物品的数量都是无限个&#xff0c;而0-1背包每个物品只有一个&#xff1b; 内嵌循环遍历顺序 ​ 回顾一维数组0-1背包的遍历递推公式&#xff1a; for (int i 0&#xff1b; i < weight.size(); i)…

软件工程经济学--期末复习资料

软件工程经济学--期末复习资料 前言第一章 绪论第二章 软件工程经济学基础第三章 软件的成本管理与定价分析第四章 软件工程项目评价方法与经济效果评价第五章 软件生产函数、效益分析及不确定性分析第六章 软件工程项目进度计划的制定结尾总结 前言 软件工程经济学&#xff0…

CSS-伪类选择器

结构伪类选择器 作用&#xff1a;根据元素的结构关系查找元素 分类&#xff1a; 选择器说明元素名:first-child查找第一个元素元素名:last-child查找最后一个元素元素名:nth-child(N)查找第N名元素 <!DOCTYPE html> <html lang"en"> <head><me…

机柜风扇KTS011温湿度控制器KTO011风机控制温控器机械开关温控仪

品牌&#xff1a;威驰 型号&#xff1a;KTS011常开 产地&#xff1a;中国大陆 颜色分类&#xff1a;KTS011常开,KTO011常闭 KTS011与KTO011的区别 KTS011&#xff0c;常开型&#xff0c;可搭配风扇/风机使用&#xff1a;当环境温度超过温控器设定温度&#xff0c;温控…

2024高校网络安全管理运维赛wp

文章目录 misc签到钓鱼邮件识别easyshellSecretDBGatewayzipApachef for r webphpsqlMessy Mongo misc 签到 钓鱼邮件识别 两部分解base64&#xff0c;各一个flag 后面没有什么地方有有用信息了&#xff0c;根据题目钓鱼邮件&#xff0c;可能第三段flag就跟DMARC、DKIM 和 SP…

出海企业哪种组网方案更省事?

对于出海企业而言&#xff0c;建立跨地区的数据传输和协同工作至关重要&#xff0c;以提升运营效率。因此&#xff0c;网络构建变得迫在眉睫。通过构建企业组网&#xff0c;企业能够加强与海外分支、客户和合作伙伴之间的联系&#xff0c;加速海外业务的发展。 然而&#xff0c…

【C语言】—— 动态内存管理

【C语言】——动态内存管理 一、动态内存管理概述1.1、动态内存的概念1.2、动态内存的必要性 二、 m a l l o c malloc malloc 函数2.1、函数介绍2.2、应用举例 三、 c a l l o c calloc calloc 函数四、 f r e e free free 函数4.1、函数介绍4.2、应用举例 五、 r e a l l o …

postgresql中写python去读取HDFS数据,像表一样使用。

简介 首先postgresql是支持python的&#xff0c;在安装postgresql数据库的时候需要执行python支持。可以使用python进行写fundcation 自然也就可以自定义funcation去读取HDFS文件&#xff0c;以此替换掉hive的&#xff0c;省去中间频繁切换服务器的麻烦。 安装postgresql use…

XMind 2021 v11.1.2软件安装教程(附软件下载地址)

软件简介&#xff1a; 软件【下载地址】获取方式见文末。注&#xff1a;推荐使用&#xff0c;更贴合此安装方法&#xff01; XMind 2021 v11.1.2被誉为顶尖思维导图工具&#xff0c;以其简洁、整洁的界面和直观的功能布局脱颖而出。尽管软件体积小巧&#xff0c;却极具强大功…

OpenCV 入门(六) —— Android 下的人脸识别

OpenCV 入门系列&#xff1a; OpenCV 入门&#xff08;一&#xff09;—— OpenCV 基础 OpenCV 入门&#xff08;二&#xff09;—— 车牌定位 OpenCV 入门&#xff08;三&#xff09;—— 车牌筛选 OpenCV 入门&#xff08;四&#xff09;—— 车牌号识别 OpenCV 入门&#xf…

使用in运算符检查状态活动

在具有并行状态分解的Stateflow图表中&#xff0c;子状态可以同时处于活动状态。如果检查状态活动&#xff0c;则可以在两个平行状态下同步子状态。 例如&#xff0c;此图表有两个平行的状态&#xff1a;Place和Tracker。Tracker中的转换会在适当的位置检查状态活动&#xff0c…

icap对flash的在线升级

文章目录 一、icap原语介绍&#xff08;针对 S6 系列的 ICap&#xff09;&#xff0c;之后可以拓展到A7、K7当中去二、程序1设计2.1信号结构框图2.2 icap_delay设计2.3 icap_ctrl设计&#xff08;可以当模板使用&#xff0c;之后修改关键参数即可&#xff09; 三、程序2设计四、…