当前位置: 首页 > 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}},

 

相关文章:

  • OSPF补充信息
  • MathQ-Verify:数学问题验证的五步流水线,为大模型推理筑牢数据基石
  • Neural Blind Deconvolution Using Deep Priors论文阅读
  • Leetcode 3556. Sum of Largest Prime Substrings
  • 《1.1_4计算机网络的分类|精讲篇|附X-mind思维导图》
  • 如何设计ES的冷热数据分离架构?Elasticsearch 集群如何实现高可用?如何避免脑裂问题?如果出现脑裂如何恢复?
  • API Gateway CLI 实操入门笔记(基于 LocalStack)
  • 基于 docker 部署 k8s 集群
  • 集星云推短视频矩阵系统的定制化与私有化部署方案
  • redis在Spring中的一些使用
  • 机器学习中的线性回归:从理论到实践的深度解析
  • 企业数据安全全生命周期守护方案:从组织到技术的三维实践
  • PyTorch实战——生成对抗网络数值数据生成
  • (自用)Java学习-5.14(注册,盐值加密,模糊查询)
  • 树莓派超全系列教程文档--(48)树莓派内核头文件
  • Vue列表渲染
  • OpenCV CUDA模块图像过滤------创建一个行方向的一维积分(Sum)滤波器函数createRowSumFilter()
  • Java进阶并发编程(中篇)
  • 华为仓颉语言初识:结构体struct和类class的异同
  • Unity 3D AssetBundle加密解密教程
  • 腾讯微博做网站外链步骤/关键词排名点击软件
  • 做网站排名工具/产品设计
  • 大气蓝色企业网站模板/什么是竞价
  • 荷城网站制作公司/今日头条新闻最新疫情
  • 青海网站开发建设/疫情最新资讯
  • 建设网站运营方案/公司网站制作要多少钱