uni-app 微信小程序 picker 三级联动
之前做过一个picker的三级联动功能,这里分享代码给大家
具体代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 | // An highlighted block < template > < view > < picker mode="multiSelector" @change="bindMultiPickerChange" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray"> < view class="picker" style="display: flex;justify-content:space-around;align-items:center;width: 100%;flex: 1"> < view class="energy"> {{ areaname }} < uni-icons :size="40" class="uni-icon-wrapper" color="#e0e0e0" type="arrowdown" /> </ view > < view style="background-color: #50a0d1;height: 50rpx;width: 1px;opacity: 0.5"></ view > < view class="energy"> {{ buildingname }} < uni-icons :size="40" class="uni-icon-wrapper" color="#e0e0e0" type="arrowdown" /> </ view > < view style="background-color: #50a0d1;height: 50rpx;width: 1px;opacity: 0.5"></ view > < view class="energy"> {{ floorname }} < uni-icons :size="40" class="uni-icon-wrapper" color="#e0e0e0" type="arrowdown" /> </ view > </ view > </ picker > </ view > </ template > < script > import Vue from 'vue'; export default { data() { return { multiArray: [['1', '2', '3', '4', '5', '6', '7'], ['1舍', '2舍', '3舍', '4舍'], ['111楼', '112楼', '113楼', '114楼']], multiIndex: [0, 0, 0], tabindex: 0, ydindex: 0, firstid: '0', secondid: '0', thirdid: '0', areaname: '1', dengswitchvalue: '', ktswitchvalue: '', buildingname: '1舍', floorname: '111楼', nowitem: '1-1舍-111楼', column1data: [ //每个院部的楼栋 ['11舍', '12舍', '13舍', '14舍'], // ['21舍', '22舍', '23舍', '24舍'], ['21舍'], // ['31舍', '32舍', '33舍', '34舍'], ['31舍', '32舍'], ['41舍', '42舍', '43舍', '44舍'], ['51舍', '52舍', '53舍', '54舍'], ['61舍', '62舍', '63舍', '64舍'], ['71舍', '72舍', '73舍', '74舍'] ], hangdata: [ //每一栋包含楼层 [['111楼', '112楼', '113楼', '114楼'], ['121楼', '122楼', '123楼'], ['131楼', '132楼', '133楼', '134楼'], ['141楼', '142楼', '143楼', '144楼']], // [['211楼', '212楼', '213楼', '214楼'], ['221楼', '222楼', '223楼', '224楼'], ['231楼', '232楼', '233楼', '234楼'], ['241楼', '242楼', '243楼', '244楼']], [['211楼', '212楼', '213楼', '214楼']], // [['311楼', '312楼', '313楼', '314楼'], ['321楼', '322楼', '323楼', '324楼'], ['331楼', '332楼', '333楼', '334楼'], ['341楼', '342楼', '343楼', '344楼']], [['311楼', '312楼', '313楼', '314楼'], ['321楼', '322楼', '323楼']], [['411楼', '412楼', '413楼', '414楼'], ['421楼', '422楼', '423楼', '424楼'], ['431楼', '432楼', '433楼', '434楼'], ['441楼', '442楼', '443楼', '444楼']], [['511楼', '512楼', '513楼', '514楼'], ['521楼', '522楼', '523楼'], ['531楼', '532楼', '533楼', '534楼'], ['541楼', '542楼', '543楼', '544楼']], [['611楼', '612楼', '613楼', '614楼'], ['621楼', '622楼', '623楼', '624楼'], ['631楼', '632楼', '633楼', '634楼'], ['641楼', '642楼', '643楼', '654楼']], [['711楼', '712楼'], ['721楼', '722楼', '723楼'], ['731楼', '732楼', '733楼', '734楼'], ['741楼', '742楼', '743楼', '744楼']] ] }; }, methods: { bindMultiPickerChange(e) { this.multiIndex = e.detail.value; this.areaname = this.multiArray[0][e.detail.value[0]]; this.buildingname = this.multiArray[1][e.detail.value[1]]; this.floorname = this.multiArray[2][e.detail.value[2]]; this.nowitem = this.multiArray[0][e.detail.value[0]] + '-' + this.multiArray[1][e.detail.value[1]] + '-' + this.multiArray[2][e.detail.value[2]]; console.log('选择了:' + this.nowitem); }, bindMultiPickerColumnChange(e) { switch (e.detail.column) { case 0: this.firstid = e.detail.value; if (typeof this.hangdata[this.firstid][this.secondid] == 'undefined') { this.secondid = 0; //当第二列数据没有上一个second列的情况 } switch (e.detail.value) { case this.firstid: Vue.set(this.multiArray, 1, this.column1data[this.firstid]); Vue.set(this.multiArray, 2, this.hangdata[this.firstid][this.secondid]); //为了对应第三列关系 break; default: break; } break; case 1: this.secondid = e.detail.value; if (typeof this.hangdata[this.firstid][this.secondid][this.thirdid] == 'undefined') { this.thirdid = 0; //当第三列数据没有上一个列的情况 } switch (this.firstid) { case this.firstid: switch (this.secondid) { case this.secondid: Vue.set(this.multiArray, 2, this.hangdata[this.firstid][this.secondid]); break; default: break; } break; default: break; } case 2: this.thirdid = e.detail.value; break; default: break; } } } }; </ script > < style lang="less"></ style > |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)