uniapp picker 多列选择器用法

news2024/11/28 4:38:53

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.length
	for(var i=communityLen-1;i>=0;i--){
		let communityChildrenLen = this.communityListData[i].children.length
		for(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.length
	for(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.coloradmin.cn/o/1603681.html

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

相关文章

联想小新Air14-2019锐龙版更换硬盘

首先打下D面所有螺丝&#xff08;内六角螺丝&#xff0c;需要准备螺丝刀&#xff09;&#xff0c;然后从下方翘起整个D面打开如下图 原装为2280长度的海力士硬盘&#xff0c;有空余的2242长度硬盘位 更换前断电&#xff0c;建议拆下电池&#xff08;扣下电池排线后不好安装&am…

【解决去除springboot-内嵌tomcat的异常信息显示】去掉版本号和异常信息

调用这个&#xff0c;能复现tomcat的报错 http://localhost:8182/defaultroot/DownloadServlet?modeType2&pathhtml&FileName…\login.jsp&name123&fiewviewdownload2&cdinline&downloadAll2 springboot项目如何隐藏&#xff1f; springboot内嵌了to…

【IoTDB 线上小课 02】开源增益的大厂研发岗面经

还有友友不知道我们的【IoTDB 视频小课】系列吗&#xff1f; 关于 IoTDB&#xff0c;关于物联网&#xff0c;关于时序数据库&#xff0c;关于开源...给我们 5 分钟&#xff0c;持续学习&#xff0c;干货满满~ 5分钟学会 大厂研发岗面试 之前的第一期小课&#xff0c;我们听了 I…

康耐视visionpro-CogHistogramTool操作操作工具详细说明

CogHistogramTool]功能说明&#xff1a; 对图像区域中的像素值进行灰度值统计 CogHistogramTool操作说明&#xff1a; ①.打开工具栏&#xff0c;双击或点击鼠标拖拽添加CogHistogramTool工具 2.添加输入图像&#xff0c;点击鼠标右键“链接到”或以连线拖拽的方式选择相应输入…

Dual-AMN论文阅读

Boosting the Speed of Entity Alignment 10: Dual Attention Matching Network with Normalized Hard Sample Mining 将实体对齐速度提高 10 倍&#xff1a;具有归一化硬样本挖掘的双重注意力匹配网络 ABSTRACT 寻找多源知识图谱(KG)中的等效实体是知识图谱集成的关键步骤&…

Real3DPortrait照片对口型,数字人,音频/视频驱动数字人

先看效果 上传一张图片和一段音频&#xff0c;照片如下&#xff1a; 合成后效果如下&#xff1a; 照片对口型-音频驱动 支持音频驱动和视频驱动&#xff0c;视频可以使照片有参照视频中的口型和和动作。 项目地址 https://github.com/yerfor/Real3DPortrait 我的环境 win…

【C语言回顾】函数

前言1. 函数的概念和分类2.库函数3. 自定义函数3.1 自定义函数的简单介绍3.2 自定义函数举例 4. 形参和实参4.1 形参4.2 实参4.3 形参和实参的关系4.3.1 理解4.3.2 举例代码和调试 5. 嵌套函数和链式访问5.1 嵌套函数5.2 链式访问 6. 函数的声明和定义6.1 单个文件6.2 多个文件…

【活动通知】COC 成都 CMeet 系列:2024 WTM 社区(国际妇女节)IWD 活动!

文章目录 前言一、关于 2024 WTM IWD 社区活动二、时间地点三、活动议程及报名方式四、分享嘉宾及主题信息4.1、李然——点燃创造力&#xff0c;重塑未来4.2、何静——乘风破浪&#xff0c;与 AI 的过去、现在、未来式4.3、晓丽老师——用 AI 给女性插上飞翔的翅膀 五、CSDN 成…

小成本搏大流量:微信/支付宝小程序搜索排名优化

随着移动互联网的快速发展&#xff0c;小程序已成为企业和个人开发者重要的流量入口和业务承载平台。而小程序搜索排名则是影响小程序曝光量、用户获取及业务转化的关键因素。小柚在本文和大家探讨如何制定有效的优化方案&#xff0c;提升小程序在搜索结果中的排名。 首先跟我…

2023年图灵奖颁发给艾维·维格森(Avi Wigderson),浅谈其计算复杂性理论方面做出的重要贡献

Avi Wigderson是一位以色列计算机科学家&#xff0c;他在计算复杂性理论方面做出了重要的贡献&#xff0c;并对现代计算产生了深远的影响。 Wigderson的主要贡献之一是在证明计算复杂性理论中的基本问题的困难性方面。他证明了许多经典问题的困难性&#xff0c;如图论中的图同构…

如何使用Postgres的扩展(如PostGIS)来支持地理空间数据

文章目录 解决方案1. 安装PostGIS扩展2. 创建地理空间数据表3. 插入地理空间数据4. 进行地理空间查询 示例代码 在PostgreSQL中&#xff0c;我们可以使用扩展来增强数据库的功能。对于地理空间数据&#xff0c;PostGIS是一个特别有用的扩展&#xff0c;它提供了对地理对象&…

SpringMVC 常用注解介绍

Spring MVC 常用注解介绍 文章目录 Spring MVC 常用注解介绍准备1. RequestMapping1.1 介绍2.2 注解使用 2. 请求参数2.1 传递单个参数2.2 传递多个参数2.3 传递对象2.4 传递数组 3. RequestParam3.1 注解使用3.2 传入集合 4. RequestBody5. PathVariable6. RequestPart7. Rest…

Java PDF文件流传输过程中速度很慢,如何解决?

专栏集锦&#xff0c;大佬们可以收藏以备不时之需&#xff1a; Spring Cloud 专栏&#xff1a;http://t.csdnimg.cn/WDmJ9 Python 专栏&#xff1a;http://t.csdnimg.cn/hMwPR Redis 专栏&#xff1a;http://t.csdnimg.cn/Qq0Xc TensorFlow 专栏&#xff1a;http://t.csdni…

Kimichat炒股:7个提示词案例

●了解股票投资基本概念和知识 什么是有息负债率&#xff1f;用浅显明白的话语针对没有财务会计基础的小白进行解释 Kimi的回答&#xff1a; 有息负债率是一个财务指标&#xff0c;用来衡量一家公司在其负债中有多少是需要支付利息的。简单来说&#xff0c;就是公司借的钱中&…

Scratch四级:第02讲 字符串

第02讲 字符串 教练:老马的程序人生 微信:ProgrammingAssistant 博客:https://lsgogroup.blog.csdn.net/ 讲课目录 运算模块:有关字符串的积木块遍历字符串项目制作:“解密”项目制作:“成语接龙”项目制作:“加减法混合运算器”字符串 计算机学会(GESP)中属于三级的内…

PotPlayer 图像截取

PotPlayer 图像截取 1. PotPlayer2. PotPlayer 下载2.1. PotPlayer 240305 3. 图像截取References 1. PotPlayer http://www.potplayercn.com/ PotPlayer 是 KMPlayer 原作者姜勇囍进入新公司 Daum 之后推出的&#xff0c;继承了 KMPlayer 所有的优点&#xff0c;拥有异常强大…

go语言并发实战——日志收集系统(三) 利用sarama包连接KafKa实现消息的生产与消费

环境的搭建 Kafka以及相关组件的下载 我们要实现今天的内容&#xff0c;不可避免的要进行对开发环境的配置&#xff0c;Kafka环境的配置比较繁琐&#xff0c;需要配置JDK,Scala,ZoopKeeper和Kafka&#xff0c;这里我们不做赘述&#xff0c;如果大家不知道如何配置环境&#x…

全国产化无风扇嵌入式车载电脑农耕车辆/钢厂天车行业应用

农耕车辆行业应用 背景介绍 当前农耕车车载电脑主要的功能&#xff0c;是要实现农耕车的精确的定位和导航&#xff0c;更加先进的系统则要实现农耕车自动驾驶&#xff0c;与农耕车上相关传感器的通讯(例如耕土深度的传感器, 油量存量传感器…)来实现更多的自动化、信息化的功能…

28岁转行嵌入式适合转嵌入式吗?

转行到嵌入式领域是一个很好的选择&#xff0c;特别是如果你对电子技术、嵌入式系统和软硬件交互感兴趣的话。我这里有一套嵌入式入门教程&#xff0c;不仅包含了详细的视频 讲解&#xff0c;项目实战。如果你渴望学习嵌入式&#xff0c;不妨点个关注&#xff0c;给个评论222&a…

Java面试八股之JDK和JRE的区别

JDK和JRE的区别 定义&#xff1a;JDK&#xff08;Java Development Kit&#xff09;是Java开发工具包的缩写&#xff0c;它是Java开发人员必备的工具。JDK包含了编译器(javac)、Java虚拟机(JVM)和Java类库等开发工具和资源。它提供了开发、编译、调试和运行Java程序所需的一切…