uniapp picker 多列选择器用法

uniapp picker 多列选择器联动筛选器交互处理方法,
uniapp 多列选择器  mode="multiSelector" 数据及筛选联动交互处理,
通过接口获取数据,根据用户选择当前列选项设置子列数据,实现三级联动效果,
本示例中处理了三级无数据时则从数据中删除,处理三级后二级无数据时则亦从数据中删除,删除的数据最终不展示在筛选器中。

html

<picker mode="multiSelector" @change="bindMultiPickerChange" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="communityListArray" range-key="label"><view class="picker">{{communityListArray[0][multiIndex[0]].label ? communityListArray[0][multiIndex[0]].label + ',' : ''}}{{communityListArray[1][multiIndex[1]].label ? communityListArray[1][multiIndex[1]].label + ',' : ''}}{{communityListArray[2][multiIndex[2]].label ? communityListArray[2][multiIndex[2]].label : '请选择所属社群'}}</view>
</picker>

data设置参数数据

data() {return {communityListArray : [],multiIndex : [],}
}

created 或 onLoad 中,调用请求接口获取筛选项数据方法

this.communityListDataSet();

接口获取筛选项数据,如 res.data:

[{id: 3,label: "天津",parent_id: 0,children: [{id: 51035,label: "东丽区",parent_id: 3,cityCommunity: [// 无社群数据],},],},{id: 1,label: "北京",parent_id: 0,children: [{id: 72,label: "朝阳区1",parent_id: 1,cityCommunity: [{area_id: 72, id: 13, label: "朝阳区1-社群名称",}],},{id: 73,label: "朝阳区2",parent_id: 1,cityCommunity: [// 无社群数据],}],},{id: 2,label: "上海",parent_id: 0,children: [{id: 78,label: "黄浦区",parent_id: 2,cityCommunity: [{area_id: 78, id: 16, label: "黄浦区-社群名称",}],},{id: 2813,label: "徐汇区",parent_id: 2,cityCommunity: [{area_id: 2813, id: 17, label: "徐汇区-社群名称",}],}],},{id: 4,label: "重庆",parent_id: 0,children: [{id: 119,label: "南川区",parent_id: 4,cityCommunity: [{area_id: 119, id: 5, label: "南川区-社群名称111",},{area_id: 119, id: 6, label: "南川区-社群名称222",}],}],},
]

methods 处理方法:

// 请求接口获取筛选项数据
communityListDataSet(){...this.communityListData = res.data;this.manageCommunityListThreeLevel()...
},/*
处理接口返回数据:筛选项数据删除无社群数据的城市、省份
如:天津、北京-朝阳区2,无社群数据
*/
// 处理三级无社群数据
manageCommunityListThreeLevel(){let communityLen = this.communityListData.lengthfor(var i=communityLen-1;i>=0;i--){let communityChildrenLen = this.communityListData[i].children.lengthfor(var j=communityChildrenLen-1;j>=0;j--){if(!this.communityListData[i].children[j].cityCommunity.length){this.communityListData[i].children.splice(j,1)}}}this.manageCommunityListTwoLevel()
},
// 处理二级无城市数据
manageCommunityListTwoLevel(){let communityLen = this.communityListData.lengthfor(var i=communityLen-1;i>=0;i--){if(!this.communityListData[i].children.length){this.communityListData.splice(i,1)}}this.communityListArray = [this.communityListData,this.communityListData[0].children,this.communityListData[0].children[0].cityCommunity,]
},// value 改变时触发 change 事件
bindMultiPickerChange: function (e) {// console.log(e)this.multiIndex = e.detail.value
},
// 某一列的值改变时触发 columnchange 事件
bindMultiPickerColumnChange: function (e) {if(!this.multiIndex){this.multiIndex = [0,0,0]}let column = e.detail.column;let value = e.detail.value;// console.log(column , value);let multiIndex = this.multiIndex;multiIndex[column] = value;if(column == 0){multiIndex[1] = 0;multiIndex[2] = 0;}if(column == 1){multiIndex[2] = 0;}this.multiIndex = multiIndex;let communityListArray = [];communityListArray[0] = this.communityListData;communityListArray[1] = this.communityListData[multiIndex[0]].children;if(this.communityListData[multiIndex[0]].children[multiIndex[1]].cityCommunity){communityListArray[2] = this.communityListData[multiIndex[0]].children[multiIndex[1]].cityCommunity;}else{communityListArray[2] = [];}this.communityListArray = communityListArray;
},

交互效果截图

 最终处理后的数据,天津、北京-朝阳区2,已从筛选器中删除

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

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

相关文章

SEW减速机参数查询 2-2 实践

首先说说结论&#xff1a;在不和SEW官方取得沟通之前&#xff0c;你几乎无法直接通过查阅SEW官方文档得到相关减速机的所有技术参数&#xff1a;比如轴的模数和齿数&#xff0c;轴承的参数。我在周一耗费了一个上午&#xff0c;最终和SEW方面确认后才知晓相关技术参数需要凭借销…

Jenkins的安装和部署

文章目录 概述Jenkins部署项目的流程jenkins的安装启动创建容器进入容器浏览器访问8085端口 Jenkins创建项目创建example项目 概述 Jenkins&#xff1a;是一个开源的、提供友好操作界面的持续集成&#xff08;CLI&#xff09;工具&#xff0c;主要用于持续、自动构建的一些定时…

什么是Rust语言?探索安全系统编程的未来

&#x1f680; 什么是Rust语言&#xff1f;探索安全系统编程的未来 文章目录 &#x1f680; 什么是Rust语言&#xff1f;探索安全系统编程的未来摘要引言正文&#x1f4d8; Rust语言简介&#x1f31f; 发展历程&#x1f3af; Rust的技术意义和优势&#x1f4e6; Rust解决的问题…

GlobalRouting - FastRoute代码框架和功能(三)

文章目录 一、 顶层代码框架和功能(一)、总结(二)、各文件代码的概述&#xff1a;1. FastRoute\\src\\Box.h2. FastRoute\\src\\Coordinate.h3. FastRoute\\src\\DBWrapper.h4. FastRoute\\src\\FastRouteKernel.h5. FastRoute\\src\\Grid.h成员变量成员函数 6. FastRoute\\src…

python零基础入门 (9)-- 模块与包

文章目录 前言1. 什么是模块&#xff1f;1.1 模块的定义和作用1.2 内置模块和第三方模块 2. 如何使用模块&#xff1f;2.1 导入模块2.2 使用模块中的函数和变量 3. 什么是包&#xff1f;3.1 包的定义和作用3.2 包的结构和组织方式 4. 如何创建自定义模块&#xff1f;4.1 创建一…

Conmi的正确答案——ESP32获取MAC地址

ESP-IDF版本&#xff1a;v5.2.1 ESP32芯片型号&#xff1a;ESP32C3&#xff08;4M flash版本&#xff09; ESP支持的MAC地址有&#xff1a; typedef enum {ESP_MAC_WIFI_STA, /**< MAC for WiFi Station (6 bytes) */ESP_MAC_WIFI_SOFTAP, /**< MAC for WiFi Sof…

电商技术揭秘三十:知识产权保护浅析

电商技术揭秘相关系列文章&#xff08;上&#xff09; 相关系列文章&#xff08;中&#xff09; 电商技术揭秘二十&#xff1a;能化供应链管理 电商技术揭秘二十一:智能仓储与物流优化(上) 电商技术揭秘二十二:智能仓储与物流优化(下) 电商技术揭秘二十三&#xff1a;智能…

REACT+PHP课程项目血泪史

PHP php??老师让用php写后端。什么&#xff1f;写惯了java、python。这个看起来像html标签语言的东西写后端是个什么鬼&#xff0c;看起来想落后几千年的原始语言&#xff08;手动滑稽&#xff09;。 大概介绍一下&#xff0c;php主要是后端语言&#xff0c;用来连接数据库…

Day17-Java基础之综合案例

练习一&#xff1a;飞机票 需求: 机票价格按照淡季旺季、头等舱和经济舱收费、输入机票原价、月份和头等舱或经济舱。 按照如下规则计算机票价格&#xff1a;旺季&#xff08;5-10月&#xff09;头等舱9折&#xff0c;经济舱8.5折&#xff0c;淡季&#xff08;11月到来年4月…

deepinV23 Beta3安装cuda

文章目录 下载CUDA安装,以cuda11.6为例运行.run文件安装选项配置环境变量查看cuda版本重启计算机 卸载cuda deepinV23 Beta3对应的debian版本是12&#xff1a; bookworm指的是debian12&#xff0c; sid代表不稳定版。 下载CUDA 官网&#xff1a;https://developer.nvidia.com…

你为什么会成为一名程序员?

在当今数字化时代&#xff0c;程序员这一职业越来越受到人们的关注和追捧。许多人选择成为一名程序员&#xff0c;不仅是因为这个职业的前景广阔&#xff0c;还因为他们对编程和技术的兴趣。那么&#xff0c;选择成为一名程序员的原因究竟是出于兴趣还是职业发展呢&#xff1f;…

中华环保联合会获得国家“绿色制造体系” 第三方评价机构资格

近日&#xff0c;中华环保联合会成功获得工业和信息化部“绿色制造体系”第三方评价机构资格&#xff0c;可为企业、园区及相关机构提供全面的绿色制造体系评价服务&#xff0c;包括绿色工厂、绿色园区、绿色供应链等方面。 “绿色制造体系建设”是由工业和信息化部负责统筹推进…

Python3中的时间应用 (代码)

直接上python3代码 # 对时间类型的转换 from datetime import datetime import localelocale.setlocale(locale.LC_CTYPE, "chinese")# 字符串 -> datetime类型 text "2024年-4月-1日" res datetime.strptime(text, "%Y年-%m月-%d日") pr…

redis异常:OOM command not allowed when used memory > ‘maxmemory‘

redis存储数据太多,内存溢出,导致异常 1.查看redis内存使用情况 登录redis后 info memory2.查看分配给redis的最大内存 config get maxmemory3.处理方式:拓展redis的最大内存 打开redis.conf文件,修改maxmemory 4.删掉键值重启redis后,发现删掉的数据又恢复了? redis根目录…

Midjourney是什么?Midjourney怎么用?怎么注册Midjourney账号?国内怎么使用Midjourney?多人合租Midjourney拼车

Midjourney是什么 OpenAI发布的ChatGPT4引领了聊天机器人的竞争浪潮&#xff0c;随后谷歌推出了自己的AI聊天机器人Bard&#xff0c;紧接着微软推出了Bing Chat&#xff0c;百度也推出了文心一言&#xff0c;这些聊天机器人的推出&#xff0c;标志着对话式AI技术已经达到了一个…

月球地形数据介绍(LOLA)

月球地形数据介绍 LOLA介绍LOLA数据的处理与发布数据类型和格式投影坐标系SIMPLE CYLINDRICALPOLAR STEREOGRAPHIC 数据下载与浏览 LOLA介绍 目前最新的月球地形高程数据来源于美国2009年发射的LRO探测器。 “月球勘测轨道器”(Lunar Reconnaissance Orbiter&#xff0c;LRO)…

7.2 跳跃表(skiplist)

文章目录 前言一、跳跃表——查找操作二、跳跃表——插入操作三、代码演示3.1 输出结果3.2 代码细节 四、总结&#xff1a;参考文献&#xff1a; 前言 本章内容参考海贼宝藏胡船长的数据结构与算法中的第七章——查找算法&#xff0c;侵权删。 查找的时间复杂度能从原来链表的…

getopt函数使用

1. 函数介绍 用来解析命令行参数的。 函数原型 #include <unistd.h>int getopt(int argc, char * const argv[],const char *optstring);第三个参数就是设置解析的参数。 假设 o p t s t r i n g " a b : c : : " optstring "ab:c::" optstring…

BOOT和UBOOT区别与联系

一、定义 1.1 Boot&#xff08;启动&#xff09; 在计算机和嵌入式系统的基本概念中&#xff0c;“boot”是指启动过程&#xff0c;这是一个系统从加电开始直至进入操作系统运行状态的过程。在嵌入式系统中&#xff0c;这个过程通常包括初始化硬件、加载并执行引导加载…

线上真实案例之执行一段逻辑后报错Communications link failure

1.问题发现 在开发某个项目的一个定时任务计算经销商返利的功能时&#xff0c;有一个返利监测的调度&#xff0c;如果某一天返利计算调度失败了&#xff0c;需要重新计算&#xff0c;这个监测的调度就会重新计算某天的数据。 在UAT测试通过&#xff0c;发布生产后&#xff0c…