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.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,已从筛选器中删除

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【honggfuzz学习笔记】honggfuzz的基本特性

本文架构 1.动机2.honggfuzz的基本概念官网描述解读 3. honggfuzz的反馈驱动(Feedback-Driven)软件驱动反馈&#xff08;software-based coverage-guided fuzzing&#xff09;代码覆盖率代码覆盖率的计量单位 代码覆盖率的统计方式 硬件驱动反馈&#xff08; hardware-based co…

IDEA 安装、基本使用、创建项目

文章目录 下载基本使用修改颜色主题Keymap插件 创建项目创建模块新建 Java 类运行新建 Package打包 Jar运行 jar 包 查看文档 下载 官方下载地址&#xff1a;https://www.jetbrains.com/zh-cn/idea/download/?sectionmac 这里我下载 macOS 社区版&#xff0c;IDEA 2024.1 (C…

60道计算机二级模拟试题选择题(含答案和解析)

点击下载《60道计算机二级模拟试题选择题&#xff08;含答案和解析&#xff09;》 1. 前言 本文设计了一份针对计算机二级考试的选择题&#xff0c;旨在考察考生对计算机基础知识和应用技能的掌握情况。试题涵盖了计算机基础知识、操作系统、办公软件、计算机网络等多个方面&…

【学习】Jmeter、postman、python如何与数据库相互配合

在当今数字化时代&#xff0c;数据库已经成为我们日常生活中不可或缺的一部分。无论是购物、社交还是工作&#xff0c;数据库都在默默地为我们提供着高效、稳定的服务。而在众多的技术工具中&#xff0c;Jmeter、Postman和Python成为了操作数据库的三大主流技术。今天&#xff…

虚拟机vm桥接模式linux(centos,ubuntu)联网

台式机网线 查看宿主机网络 编辑虚拟机—>虚拟网络编辑器–>更改设置 选择&#xff0c;确定 进入linux系统 输入ip addr找到自己的网卡 我的是eno16777736 centos&#xff1a; 编辑 HWADDR"00:0C:29:54:CE:B8" TYPE"Ethernet" BOOTPROTO"…

刷题。。。。。。

1.ezmd5 根据题目提示 我们知道应该是要上传两张md5值相同的图片 根据原文链接&#xff1a;cryptanalysis - Are there two known strings which have the same MD5 hash value? - Cryptography Stack Exchange 把保存下来的图片上传一下 得到flag 2.ezhttp 根据原文链接&…

LeetCode36: 有效的数独(Java)

题目&#xff1a; 请你判断一个 9 x 9 的数独是否有效。只需要 根据以下规则 &#xff0c;验证已经填入的数字是否有效即可。 数字 1-9 在每一行只能出现一次。数字 1-9 在每一列只能出现一次。数字 1-9 在每一个以粗实线分隔的 3x3 宫内只能出现一次。&#xff08;请参考示例…

适配器模式【结构型模式C++】

1.概述 适配器模式是一种结构型设计模式&#xff0c; 又称为变压器模式、包装模式&#xff08;Wrapper&#xff09; 将一个类的接口变换成客户端所期待的另一种接口&#xff0c;从而使原本因接口不匹配而无法在一起工作的两个类能够在一起工作。 2.结构 Target&#xff1a;适配…

美创科技19周年数据安全案例展

2005-2024 践行“让数据更安全&#xff0c;更有价值”的使命 美创19年砌垒&#xff0c;与不同行业用户 一同筑牢数字之基 美创19周年案例展 走进这段时间长廊 探索美创与各行业伙伴的数据安全实践 #1 数据安全体系化建设 浙江省&#xff0c;数字化改革先行地。以数字化…

Java面试八股之fail-fast和fail-safe的区别

简述fail-fast和fail-safe的区别 定义与基本概念 fail-fast&#xff1a; 定义&#xff1a;fail-fast是一种迭代器机制&#xff0c;当集合在迭代过程中被结构上修改&#xff08;如添加、删除元素&#xff09;&#xff0c;会立即抛出ConcurrentModificationException异常&…

Python数据容器(二)

一.list列表的案例 二.list列表的循环遍历 既然数据容器可以存储多个元素&#xff0c;那么&#xff0c;就会有需求从容器内依次取出元素进行操作。 将容器内的元素依次取出进行处理的行为&#xff0c;称之为&#xff1a;遍历、迭代。 &#xff08;一&#xff09;列表的遍历—…

文献速递:深度学习肝脏肿瘤诊断---双能量CT深度学习放射组学预测大梁状大块型肝细胞癌

Title 题目 Dual-Energy CT Deep Learning Radiomics to Predict Macrotrabecular-Massive Hepatocellular Carcinoma 双能量CT深度学习放射组学预测大梁状大块型肝细胞癌 Background 背景 It is unknown whether the additional information provided by multiparametric …

获取公募基金净值【数据分析系列博文】

摘要 从指定网址获取公募基金净值数据&#xff0c;快速解析并存储数据。 &#xff08;该博文针对自由学习者获取数据&#xff1b;而在投顾、基金、证券等公司&#xff0c;通常有Wind、聚源、通联等厂商采购的数据&#xff09; 导入所需的库&#xff1a;代码导入了一些常用的库…

OpenCV从入门到精通实战(五)——dnn加载深度学习模型

从指定路径读取图像文件、利用OpenCV进行图像处理&#xff0c;以及使用Caffe框架进行深度学习预测的过程。 下面是程序的主要步骤和对应的实现代码总结&#xff1a; 1. 导入必要的工具包和模型 程序开始先导入需要的库os、numpy、cv2&#xff0c;同时导入utils_paths模块&…

PACNet CellNet(代码开源)|bulk数据作细胞分类,评估细胞命运性能的一大利器

文章目录 1.前言2.CellNet2.1CellNet简介2.2CellNet结果 3.PACNet3.1安装R包与加载R包3.2加载数据3.3开始训练和分类3.4可视化分类过程3.5可视化分类结果 4.细胞命运分类和免疫浸润比较 1.前言 今天冲浪看到一个细胞分类性能评估的R包——PACNet&#xff0c;它与转录组分析方法…

【经验总结】Jupyter 配置内核

1. 背景描述 使用 国家超算互联网中心 的服务器&#xff0c;创建 jupyterlab 容器&#xff0c;想在之前 conda 创建的环境中运行&#xff0c;可是不行&#xff0c;进入容器就直接进入 jupyterlab 2. 解决方法 配置内核 2.1 激活环境 conda activate peft2.2 安装内核 pip…

vector类——常用函数模拟(C++)

在上一篇中我们介绍了 string 类的常用函数模拟&#xff0c;接下来我们将开始讲解 vector 类的常用函数的讲解以及模拟实现&#xff0c;相较于 string 来说&#xff0c;vector 的函数不那么冗余&#xff0c;用法也没有那么多&#xff0c;但是在 vector 中的函数使用和模拟中&am…

单链表的实现(单链表的增删查改)

在顺序表中实现数据的增删的操作时&#xff0c;都要把操作位置之后的数据全部移动一遍&#xff0c;操作效率低下。其次是容量固定&#xff08;静态顺序表&#xff09;&#xff0c;虽然在动态顺序表中容量可变&#xff0c;但也会造成空间上的浪费。 单链表就完美解决了上述缺点…

微服务架构与Dubbo

一、微服务架构 微服务架构是一种架构概念&#xff0c;旨在通过将功能分解到各个离散的服务中以实现对解决方案的解耦。 分布式系统式若干独立系统的集合&#xff0c;但是用户使用起来好像是在使用一套系统。 和微服务对应的是单体式开发&#xff0c;即所有的功能打包在一个WAR…

No spring.config.import property has been defined

运行Springcloud项目出现下面错误&#xff1a; Description: No spring.config.import property has been defined Action: Add a spring.config.importnacos: property to your configuration. If configuration is not required add spring.config.importoptional:nac…