uniapp的多列选择器

server/2024/12/19 4:04:04/

在这里插入图片描述

1.代码如下

<template><view class="container"><form><picker mode="multiSelector" :range="multiArray" @change="onMultiChange" @columnchange="onMultiColumnChange"><view class="picker"><text>{{ multiArray[0][selectedIndex[0]] }}</text><text class="iconfont icon-down"></text><text>{{ multiArray[1][selectedIndex[1]] }}</text><text class="iconfont icon-down"></text></view></picker><view class="result"><text>最终选择结果:</text><text>{{ result }}</text></view></form></view>
</template><script setup>
import { ref, onMounted } from 'vue'// 数据定义
const multiArray = ref([]) // 两列联动数据
const selectedIndex = ref([0, 0]) // 当前选中的索引,市、区
const cityList = ref([{name: "广州市",districtList: ["荔湾区", "越秀区", "海珠区", "天河区", "白云区", "黄埔区", "番禺区", "花都区", "南沙区", "增城区", "从化区"]},{name: "深圳市",districtList: ["罗湖区", "福田区", "南山区", "宝安区", "龙岗区", "盐田区", "龙华区", "坪山区", "光明区", "大鹏新区"]}
])const result = ref('') // 最终结果// 初始化多列联动数据
onMounted(() => {multiArray.value = [cityList.value.map(city => city.name), // 市列表,广州市和深圳市cityList.value[0].districtList // 区列表,初始化为广州市的区]updateResult()
})// 更新最终结果
const updateResult = () => {const provinceName = '广东省' // 假设只有一个省,可以根据实际情况调整const selectedCity = cityList.value[selectedIndex.value[0]]const selectedDistrict = selectedCity.districtList[selectedIndex.value[1]]result.value = `${provinceName} - ${selectedCity.name} - ${selectedDistrict}`
}// 当用户选择市或区时,更新最终结果
const onMultiChange = (e) => {selectedIndex.value = e.detail.valueconst selectedCity = cityList.value[selectedIndex.value[0]]multiArray.value[1] = selectedCity.districtListupdateResult()
}// 当用户改变市时,更新区数据并更新最终结果
const onMultiColumnChange = (e) => {const column = e.detail.columnconst value = e.detail.valueif (column === 0) {const selectedCity = cityList.value[value]multiArray.value[1] = selectedCity.districtListselectedIndex.value[1] = 0 // 重置区索引为0}updateResult()
}
</script><style scoped>
.container {padding: 20px;
}
.picker {padding: 10px;background-color: #f0f0f0;border-radius: 5px;text-align: center;margin-bottom: 20px;
}
.iconfont {margin-left: 10px;
}
.result {margin-top: 20px;font-size: 16px;
}
</style>

2.当前默认值为 selectedIndex = ref([0, 0]) 需要为空值改为-1,-1后给uni-picker加个高度


http://www.ppmy.cn/server/151346.html

相关文章

基于Spring Boot的社区药房系统

一、系统背景与目的 随着医疗改革的深入和社区医疗服务的不断完善&#xff0c;社区药房在居民健康保障中扮演着越来越重要的角色。然而&#xff0c;传统的药房管理方式存在着库存管理混乱、药品销售不透明、客户信息管理不规范等问题。为了解决这些问题&#xff0c;基于Spring…

Redis篇-16--持久化篇(RDB,AOF,混合持久化,最佳策略)

Redis是一个内存中的键值存储系统&#xff0c;虽然它主要将数据保存在内存中以提供高性能的读写操作&#xff0c;但它也提供了多种持久化机制&#xff0c;以确保在服务器重启或崩溃后&#xff0c;数据不会丢失。Redis主要支持两种持久化方式&#xff1a;RDB&#xff08;Redis D…

概率论得学习和整理23:EXCEL 数据透视表基础操作

目录 1 选择数据&#xff0c;插入数据透视表 2 选择数据透视表生成位置 3 出现了数据透视表的面板 4 数据透视表的基本结构认识 4.1 交叉表/列联表 4.2 row, column, cell 一个新增的筛选器&#xff0c;就这么简单 4.3 可以只添加 rowcell/值 &#xff0c;也可以colu…

嵌入式跨平台工具链终极方案

嵌入式跨平台工具链终极方案 1. 解决烦人的编译&#xff0c;从编译器开始2. T0级别的代码编辑器IDE3. git linus之父开发神奇的分布式代码管理工具 我们从8051开始学习嵌入式&#xff0c;用过了不少IDE&#xff0c;比如经典的keil和IAR&#xff0c;但是这些IDE都不便宜&#xf…

Excel拆分脚本

Excel拆分 工作表按行拆分为工作薄 工作表按行拆分为工作薄 打开要拆分的Excel文件&#xff0c;使用快捷键&#xff08;AltF11&#xff09;打开脚本界面&#xff0c;选择要拆分的sheet&#xff0c;打开Module&#xff0c;在Module中输入脚本代码&#xff0c;然后运行脚本 Su…

Android OnTouchListener OnTouchEvent OnClickListener三者之间的关系?

在android开发过程中&#xff0c;我们时常会需要与用户进行信息交互&#xff0c;就会接触到android的两种事件处 理机制&#xff1a;事件回调机制&#xff08;onEvent&#xff09;和事件监听机制&#xff08;onListener&#xff09;&#xff0c;那么他们两者之间到底有什 么区别…

划分WLAN的三种主要方法,基于WLAN,基于IP,基于端口

划分WLAN的三种主要方法包括基于交换机端口的划分、基于MAC地址的划分和基于L3的IP划分‌。 ‌基于交换机端口的划分‌&#xff1a;这是最常见的VLAN划分方法。通过将交换机上的特定端口分配给不同的VLAN&#xff0c;可以实现网络的不同部分相互隔离。每个端口只能属于一个VLAN…

论文信息收集1217

系列博客目录 文章目录 系列博客目录1.《A low-rank support tensor machine for multi-classification》2.Supervised Learning by Low Rank Estimation on Tensor Data.3.Tensor Regression Using Low-rank and Sparse Tucker Decompositions 张量回归&#xff1a;低秩和稀疏…