uni-app picker多列选项

预期实现的效果:
在这里插入图片描述
选中后的效果:
在这里插入图片描述

// Dom部分
<template>
	<picker mode="multiSelector" :range="ssqRange" range-key="name" @columnchange="ssqColumnChange" @change="ssqChange" class="picker-item">
	  <view class="picker-view">
		<text>{{ssqValue}}</text>
		<view class="jiantou"></view>
	  </view>
	</picker>
</template>

// JS部分
export default {
	data() {
		return {
			ssqData:[],//省市区的级联数据
			ssqRange:[],//封装好的省市区下拉
			ssqIndex:[],//省市区选中项index
			ssqValue:"",//目前选中值的文字
		}
	},
	methods:{
		async getProvincesCitiesDistricts(){
			// 获取省市区数据
			await fetch("/static/provincesCitiesDistricts.json")
				.then(response => response.json())
				.then(data => {
					this.ssqData=data;
					if(this.ssqData.length>0){
						// 多列picker要求的数据格式是 [省数组,市数组,区数组]
						this.ssqRange = [
							this.ssqData,
							this.ssqData[0].list,
							this.ssqData[0].list[0].list
						];
						this.ssqIndex = [0,0,0];// 索引默认第一个
					}
			});
		},
		ssqColumnChange(e){//多列里的每一列选项改变
			let {column,value} = e.detail;
			this.ssqIndex[column] = value;//当前操作的这一列赋新值
			if(column===0){//第一列改变
				this.ssqIndex[1] = 0;
				this.ssqIndex[2] = 0;
			}else if(column===1){//第二列改变
				this.ssqIndex[2] = 0;
			}
			this.ssqRange = [
				this.ssqData,
				this.ssqData[this.ssqIndex[0]].list,
				this.ssqData[this.ssqIndex[0]].list[this.ssqIndex[1]].list
			];
		},
		ssqChange(e){//点击确定按钮,选项改变
			this.ssqIndex = e.detail.value;
			this.getSsqValue();//计算选中项的中文
		},
		getSsqValue(){
			let result=""
			if(this.ssqRange.length>0){
				this.ssqRange.forEach((e,i)=>{
					result += this.ssqRange[i][this.ssqIndex[i]].name + "-"
				})
			}
			this.ssqValue= result.slice(0,-1);
		},
	}
}

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

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

相关文章

【ajax实战05】文章封面发布

一&#xff1a;实现效果 二&#xff1a;实现步骤 1 准备标签结构和样式 html结构样式 <div class"cover"><label for"img">封面&#xff1a;</label><label for"img" class"place"></label><inpu…

如何精准分析人形机器人运动数据?

全球“机器换人”进程加速,人形机器人有望成为AI下一个重要落地应用场景;EtherCAT-Analyzer具备分析人形机器人所有关节和电池与主站的通讯信息,快速掌握节点网络状态! 前言 随着人形机器人行业的发展及《中国制造2025》的全面实施,传统的脉冲模式控制很大程度上制约了机…

当了面试官才知道:做好这3点,面试成功率至少提高50%

关于辉哥&#xff1a; 资深IT从业者&#xff0c; 曾就职于阿里、腾讯、美团、中信科等互联网公司和央企&#xff1b; 两岁小男孩的父亲。 不定期分享职场 | 婚姻 | 育儿 | 个人成长心得体会 关注我&#xff0c;一起学习和成长。 最近作为公司社招面…

用Microsoft.Extensions.Hosting 管理WPF项目.

首先引入必要的包: <ItemGroup><PackageReference Include"CommunityToolkit.Mvvm" Version"8.2.2" /><PackageReference Include"Microsoft.Extensions.Hosting" Version"8.0.0" /><PackageReference Include&q…

必应bing搜索广告投放介绍,投放的广告形式和效果

必应Bing搜索广告以其独特的市场定位、高质量的用户群体和强大的全球覆盖能力&#xff0c;成为众多企业拓展业务、提升品牌影响力的重要渠道。作为微软旗下的一款搜索引擎&#xff0c;必应不仅在美国市场占据重要份额&#xff0c;其在全球范围内的影响力也不容小觑。对于寻求国…

MySQL 基础概念

MySQL逻辑架构 MySQL 服务器逻辑架构图 最上层的服务并不是MySQL所独有的&#xff0c;大多数基于网络的客户端/服务器的工具或者服务都有类似的架构&#xff0c;比如连接管理、授权认证、安全等等。 大多数MySQL的核心服务都在第二层&#xff0c;包括查询解析、分析、优化、…

【JavaEE进阶】Spring AOP使用篇

目录 1.AOP概述 2.SpringAOP快速入门 2.1 引入AOP依赖 2.2 编写AOP程序 3. Spring AOP详解 3.1 Spring AOP 核心概念 3.1.1切点(Pointcut) 3.1.2 连接点 (Join Point) 3.1.3 通知(Advice) 3.1.4 切面(Aspect) 3.2 通知类型 3.3PointCut 3.4 切面优先级 3.5 切点表…

经典神经网络(13)GPT-1、GPT-2原理及nanoGPT源码分析(GPT-2)

经典神经网络(13)GPT-1、GPT-2原理及nanoGPT源码分析(GPT-2) 2022 年 11 月&#xff0c;ChatGPT 成功面世&#xff0c;成为历史上用户增长最快的消费者应用。与 Google、FaceBook等公司不同&#xff0c;OpenAI 从初代模型 GPT-1 开始&#xff0c;始终贯彻只有解码器&#xff0…

安卓webview内h5页面调用录音设置

h5页面调用录音接口getUserMeia在webview中有可能不成功&#xff0c;进入错误回调&#xff0c;这个时候webview尽可能设置下面这些权限就会好。

Linux系统编程(七)进程间通信IPC

进程间通讯的7种方式_进程间通信的几种方法-CSDN博客 管道 pipe&#xff08;命名管道和匿名管道&#xff09;&#xff1b;信号 signal&#xff1b;共享内存&#xff1b;消息队列&#xff1b;信号量 semaphore&#xff1b;套接字 socket&#xff1b; 1. 管道 内核提供&#x…

华为云安全防护,九河云综合分解优劣势分析

随着全球化的发展&#xff0c;越来越多的企业开始寻求在国际市场上扩展业务&#xff0c;这一趋势被称为企业出海。然而&#xff0c;企业在海外扩张面临诸多隐患与安全挑战&#xff0c;其中因为地域的不同&#xff0c;在安全性方面与国内相比会变得薄弱&#xff0c;从而导致被黑…

展开说说:Android列表之RecyclerView

RecyclerView 它是从Android5.0出现的全新列表组件&#xff0c;更加强大和灵活。用于显示列表形式 (list) 或者网格形式 (grid) 的数据&#xff0c;替代ListView和GridView成为Android主流的列表组件。可以说Android客户端只要有表格的地方就有RecyclerView。 RecyclerView 内…

无痛接入FastText算法进行文本分类(附代码)

AI应用开发相关目录 本专栏包括AI应用开发相关内容分享&#xff0c;包括不限于AI算法部署实施细节、AI应用后端分析服务相关概念及开发技巧、AI应用后端应用服务相关概念及开发技巧、AI应用前端实现路径及开发技巧 适用于具备一定算法及Python使用基础的人群 AI应用开发流程概…

未来已来,如何打造智慧养殖场?

近年来&#xff0c;国家出台了一系列扶持政策&#xff0c;以促进养殖行业高质量发展&#xff0c;推动行业转型升级。在国家政策和市场需求的双重驱动下&#xff0c;养殖行业正迎来前所未有的发展机遇。智慧养殖以其高效、智能和可持续的特点&#xff0c;正逐步取代传统养殖方式…

【消息队列】RabbitMQ集群原理与搭建

目录 前言1、集群搭建1.1、安装RabbitMQ1.1.1、前置要求1.1.2、安装Erlang环境①创建yum库配置文件②加入配置内容③更新yum库④正式安装Erlang 1.1.3、安装RabbitMQ1.1.4、RabbitMQ基础配置1.1.5、收尾工作 1.2、克隆VMWare虚拟机1.2.1、目标1.2.2、克隆虚拟机1.2.3、给新机设…

涉案财物管理系统|DW-S405系统实现涉案财物科学化管理

随着社会的不断发展&#xff0c;犯罪形式日益复杂&#xff0c;涉案财物的种类和数量也不断增加。传统的涉案财物管理方式已经无法满足现代执法办案的需求。因此&#xff0c;建立一套科学、高效、规范的警用涉案财物管理系统成为公安机关亟待解决的问题。 涉案财物管理系统DW-S…

哈希表 | 哈希查找 | 哈希函数 | 数据结构 | 大话数据结构 | Java

&#x1f64b;大家好&#xff01;我是毛毛张! &#x1f308;个人首页&#xff1a; 神马都会亿点点的毛毛张 &#x1f4cc;毛毛张今天分享的内容&#x1f586;是数据结构中的哈希表&#xff0c;毛毛张主要是依据《大话数据结构&#x1f4d6;》的内容来进行整理&#xff0c;不…

vue的学习--day2

如有错误&#xff0c;烦请指正~ 目录 一、什么是单页面应用程序 二、使用工具&#xff1a;node.js 三、工具链 易错点 一、什么是单页面应用程序 多个组件&#xff08;例如登录、注册等以vue结尾的都叫做组件&#xff09;在一个页面显示&#xff0c;叫单页面应用…

Linux C 程序 【02】创建线程

1.开发背景 上一个篇章&#xff0c;基于 RK3568 平台的基础上&#xff0c;运行了最简单的程序&#xff0c;然而我们使用了 Linux 系统&#xff0c;系统自带的多线程特性还是比较重要的&#xff0c;这个篇章主要描述线程的创建。 2.开发需求 设计实验&#xff1a; 创建一个线程…

极验行为式验证码适配HarmonyOS 鸿蒙SDK下载

现阶段&#xff0c;越来越多的开发者正在积极加入鸿蒙生态系统。随着更多开发者的参与&#xff0c;早在去年9月&#xff0c;极验就成为首批拥有鸿蒙NEXT内测版本和手机系统测试机会的验证码供应商。 为了提高各开发者及企业客户集成鸿蒙版本行为验4.0的效率&#xff0c;方便大家…