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

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.xdnf.cn/news/661717.html

相关文章:

  • ETL 工具与数据中台的关系与区别
  • 1.6 如何使用命令行执行 TypeScript 文件
  • Transformer,多头注意力机制 隐式学习子空间划分
  • JAVA Zip导入导出实现
  • 20250526给荣品PRO-RK3566的Android13单独编译boot.img
  • Python程序中字符串与JSON转换的最佳实践详解
  • Java 杂谈
  • 记一个小问题:Cookie 作用域规则
  • Dify中的Agent策略插件开发例子:以Function Calling为例
  • 重磅升级!Docusign IAM 2025 V1 版本上线,重塑智能协议新体验
  • Windows逆向工程提升之IMAGE_RUNTIME_FUNCTION_ENTRY
  • 按键状态机
  • FFmpeg 4.3 H265 二十二.3,avformat_open_input 支持打开的协议
  • 07-多线程案例-任务调度
  • NoteGen 如何使用 AI 进行记录
  • set和map简单模拟实现
  • TCP 三次握手过程详解
  • 【Java学习笔记】抽象类
  • 时间的基本概念及相关技术
  • 通用寄存器 专用寄存器
  • 大模型训练中的GPU作用解析
  • 项目三 - 任务8:实现词频统计功能
  • 基于Geotools的Worldpop世界人口tif解析-以中国2020年数据为例
  • 北京大学肖臻老师《区块链技术与应用》公开课:02-BTC-密码学原理
  • Excel快捷键大全
  • 深入理解Java装饰器模式:动态扩展对象功能的优雅之道
  • USB设备状态
  • pyhton基础【5】循环
  • uniapp 小说成品源码
  • Python爬虫实战:研究Selenium框架相关技术