当前位置: 首页 > article >正文

uniapp 搭配uviwe u-picker 实现地区联栋

原始数据:

["id": 2,"createTime": null,"updateTime": null,"citycode": null,"adcode": "410000","cityName": "河南省","level": "province","center": "113.753094,34.767052","cityInitial": "H","highId": null,"cityList": [{"id": 3,"createTime": null,"updateTime": null,"citycode": "0379","adcode": "410300","cityName": "洛阳","level": "city","center": "112.453895,34.619702","cityInitial": "L","highId": 2,"cityList": []},]
]

 <u-picker :show="show" ref="uPicker" :columns="columns" @cancel="cancel" keyName="label" @confirm="confirm" @change="changeHandler"></u-picker>

地区数据改造

formatCity(val) {let cityData = []let provinceData = []if (val.length > 0) {val.forEach((province, index) => {provinceData.push({id: province.id,label: province.cityName})cityData = []province.cityList.forEach(city=> {cityData.push({id: city.id,label: city.cityName})})this.cityDataSum[index] = cityData})}console.log(this.cityDataSum)const picker = this.$refs.uPickerthis.provinceDataSum = provinceDatapicker.setColumnValues(0, provinceData)picker.setColumnValues(1, this.cityDataSum[0])},

根据数据滚动动态更新二级数据 

changeHandler(e) {console.log(e)const {columnIndex, // 列索引index, // 每列滚动的index} = econst picker = this.$refs.uPickerif (columnIndex == 0) {picker.setColumnValues(1, this.cityDataSum[index])}this.formData['city'] = this.cityDataSum[index].label},bindClick(item) {console.log(item)if (item.type == 'select') {this.show = true}},

 

http://www.lryc.cn/news/2393392.html

相关文章:

  • win10电脑时间同步失败的解决方法
  • 每日c/c++题 备战蓝桥杯(Cantor 表)
  • 代码随想录打卡|Day53 图论(Floyd 算法精讲 、A * 算法精讲 (A star算法)、最短路算法总结篇、图论总结 )
  • yum安装nginx后无法通过服务方式启动
  • 数据基座觉醒!大数据+AI如何重构企业智能决策金字塔(下)
  • 在线博客系统【测试报告】
  • Void:免费且隐私友好的 AI 编码利器,挑战 Cursor 地位?
  • Elasticsearch的写入流程介绍
  • 【PCB工艺】PCB设计中的基本概念
  • WPF事件处理器+x名称空间
  • 具身智能:OpenAI 的真正野心与未来展望
  • mybatis的mapper对应的xml写法
  • Lyra学习笔记2 GFA_AddComponents与ULyraPlayerSpawningManagerComponent
  • 个人健康中枢的多元化AI软件革新与精准健康路径探析
  • 使用 Redis 作为向量数据库
  • Matlab实现LSTM-SVM时间序列预测,作者:机器学习之心
  • 美国服务器文件系统的基本功能和命令
  • 开源软件协议大白话分类指南
  • JAVA 集合的进阶 泛型的继承和通配符
  • 机器学习与深度学习05-决策树01
  • 下一代液晶显示底层技术与九天画芯的技术突围
  • [NOIP 2001 普及组] 求先序排列 Java
  • Rockey Linux 安装ffmpeg
  • STM32 Modbus RTU从机开发实战:核心实现与五大调试陷阱解析
  • Python----目标检测(《Fast R-CNN》和Fast R-CNN)
  • iEKF的二维应用实例
  • 机器学习中的线性回归:从理论到实践的深度解析
  • 【通关文件操作(下)】--文件的顺序读写(续),sprintf和sscanf函数,文件的随机读写,文件缓冲区,更新文件
  • mysql的Memory引擎的深入了解
  • 尚硅谷-尚庭公寓部署文档