uni-app picker多列选项

news2024/11/23 15:14:09

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

// 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);
		},
	}
}

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

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

相关文章

O2OA(翱途) 开发平台之HTTP端口规划

O2OA(翱途) 开发平台[下称O2OA开发平台或者O2OA]采用相对灵活的系统架构&#xff0c;支持三种服务器运行的方式。本篇主要阐述合并服务运行独立服务运行代理端口运行三种服务器运行方式。 一、先决条件&#xff1a; 1、O2Server服务器正常运行&#xff0c;系统安装部署请参考文…

IDEA使用Apidocx插件在RAP生成接口文档

第一步 安装插件&#xff0c;安装最新的1.1.7即可&#xff0c;插件与idea版本对照 第二步 输入对应的IP或域名&#xff0c;端口说明&#xff1a; 1. 38080&#xff1a;为后端数据 API 服务器&#xff08;rap2-delos&#xff09; 2. 3000&#xff1a;为前端静态资源服务&…

使用North自部署图床服务

图床 图床可以把图片转为链接&#xff0c;从而方便我们书写、分享博客&#xff0c;目前图床主要分为以下几类: 利用 Git 仓库存储对象存储&#xff08;OSS、COS、七牛云等&#xff09;免费公共图床&#xff08;SM.MS、聚合图床、ImgTP、Postimage等&#xff09; 但上述图床都…

华侨大学24计算机考研数据速览,专硕22408复试线290分,学硕11408接收调剂!

华侨大学计算机专业创建于1980年&#xff0c;是福建省最早设立计算机专业的高校之一。1982年成立计算机系&#xff0c;2008年成立计算机科学与技术学院。根据“华侨大学计算机科学与技术学院网站”资料&#xff0c;该院有计算机科学与技术、软件工程、网络工程3个本科专业&…

【MySQL】架构体系概览

本文使用的MySQL版本是8.0 MySQL架构 ​MySQL架构整体由外部程序和MySQL服务器构成。其中内部服务器分成连接层&#xff0c;服务层&#xff0c;服务管理和公共组件&#xff0c;存储引擎层和文件系统层。 连接层 连接层的作用是处理客户端的连接。 网络端口 一台MySQL服务器…

kettle使用手册 安装9.0版本 建议设置为英语

0.新建转换的常用组件 0. Generate rows 定义一个字符串 name value就是字符串的值 0.1 String operations 字段转大写 去空格 1. Json input 来源于一个json文件 1.json 或mq接收到的data内容是json字符串 2. Json output 定义Jsonbloc值为 data, 左侧Fieldname是数据库…

MySQL 实训作业

1、DDL\DML -- 创建学生表 CREATE TABLE students (student_id INT PRIMARY KEY AUTO_INCREMENT,name VARCHAR(50),age INT,gender VARCHAR(10) );-- 创建课程表 CREATE TABLE courses (course_id INT PRIMARY KEY AUTO_INCREMENT,course_name VARCHAR(50) );-- 创建教师表 CR…

WSL Ubuntu安装可视化界面详细指南

首先,你需要先通过wsl安装好Ubuntu系统,本章教程介绍如何安装可视化桌面。 一、下载软件 下载地址:https://www.alipan.com/s/Swd8vzUwsUR 二、配置软件 三、安装xfce sudo apt-get install xfce4四、环境配置</

【力扣】有效的字母异位词

&#x1f525;博客主页&#xff1a; 我要成为C领域大神&#x1f3a5;系列专栏&#xff1a;【C核心编程】 【计算机网络】 【Linux编程】 【操作系统】 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 本博客致力于知识分享&#xff0c;与更多的人进行学习交流 给定两个字符串 s …

【Dison夏令营 Day 01】如何用Python写一个游戏“石头剪刀布”

欢迎你们踏入这个充满无限可能性的编程世界&#xff01;作为一名热爱Python的开发者&#xff0c;我深感编程的魅力&#xff0c;并希望与你们一同分享这份乐趣和激情。编程&#xff0c;不仅仅是一种技能&#xff0c;更是一种思维方式和解决问题的工具。在Python的世界里&#xf…

生成器模式详解:用法与示例

目录 生成器模式生成器模式结构生成器模式应用场景生成器模式优缺点练手题目题目描述输入描述输出描述提示信息题解 生成器模式 生成器模式&#xff0c;又称建造者模式&#xff0c;是一种创建型设计模式&#xff0c; 使你能够分步骤创建复杂对象。该模式允许你使用相同的创建代…

UE5的引擎初始化流程

UE5的引擎初始化流程 首先跟着UE的官方文档[1]获取到UE的源代码&#xff0c;然后在参考GitHub上repo的readme&#xff0c;将UE引擎从源码build出来。以Windows平台为例&#xff0c;先找到引擎的入口函数&#xff1a; int32 WINAPI WinMain(_In_ HINSTANCE hInInstance, _In_op…

头歌资源库(17)多机调度问题

一、 问题描述 二、算法思想 首先&#xff0c;将作业按照所需时间从大到小排序。 创建一个长度为m的数组task_time&#xff0c;用来记录每台机器已经加工的作业时间。 从第一个作业开始&#xff0c;依次将作业分配给空闲的机器&#xff0c;并更新task_time数组。 对于每个…

springboot 集成阿里云 OSS

引入依赖 <!-- 阿里云oss依赖 --> <dependency><groupId>com.aliyun.oss</groupId><artifactId>aliyun-sdk-oss</artifactId><version>3.9.1</version> </dependency><?xml version"1.0" encoding"…

阿里云centos 7.9 使用宝塔面板部署.netcore 6.0

前言&#xff1a; 我有一个netcore6.0的系统接口和手机端程序的站点程序之前是部署在一台windows测试服务器的IIS站点中&#xff0c; 服务器最近压力太大扛不住了&#xff0c;买了一台centos7.9的阿里云服务器准备进行迁移。具体操作日记如下。 一、安装宝塔面板 这一步涉及…

【人工智能学习之图像操作(二)】

【人工智能学习之图像操作&#xff08;二&#xff09;】 图像上的运算图像混合按位运算 图像的几何变换仿射变换透视变换膨胀操作腐蚀操作开操作闭操作梯度操作礼帽操作黑帽操作 图像上的运算 图像上的算术运算&#xff0c;加法&#xff0c;减法&#xff0c;图像混合等。 加减…

AI进阶指南第五课,大模型相关概念(知识库,微调)

虽然前面大概讲了一下大模型的一些基本概念&#xff0c;但是那些都比较偏向于大模型本身&#xff0c;但是我们使用的时候如果只靠大模型肯定是不行的。 就好比如果一个人只有一个脑子&#xff0c;其他什么部位也没有的话&#xff0c;那场面。&#xff08;感觉现在网上的AI图片…

泰迪智能科技实验室产品-云计算资源管理平台介绍

云计算资源管理平台是一款集群应用程序管理平台&#xff0c;以Docker、Kubernetes为核心引擎的容器化应用部署、运行环境&#xff0c;对数据中心的物理服务器、网络、存储、虚拟服务器等基础架构资源进行集中统一的管理、分配、监控等。平台旨在围绕行业应用逐步由“虚拟化”向…

llama-3 本地化部署实验

国产大模型的API 有限&#xff0c;编写langchain 应用问题很多。使用openai 总是遇到网络问题&#xff0c;尝试使用ollama在本地运行llama-3。结果异常简单。效果不错。llama-3 的推理能力感觉比openai 的GPT-3.5 好。 Ollama 下载 官网&#xff1a;https://ollama.com/downl…

计算机毕业设计hadoop+spark+hive知识图谱医生推荐系统 医生数据分析可视化大屏 医生爬虫 医疗可视化 医生大数据 机器学习 大数据毕业设计

测试过程及结果 本次对于医生推荐系统测试通过手动测试的方式共进行了两轮测试。 &#xff08;1&#xff09;第一轮测试中执行了个20个测试用例&#xff0c;通过16个&#xff0c;失败4个&#xff0c;其中属于严重缺陷的1个&#xff0c;属于一般缺陷的3个。 &#xff08;2&am…