前端之家收集整理的这篇文章主要介绍了uni-app 微信小程序 picker 三级联动，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
之前做过一个picker的三级联动功能，这里分享代码给大家
具体代码：
// 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],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楼','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楼','214楼']],// [['311楼','312楼','313楼','314楼'],['321楼','322楼','323楼','324楼'],['331楼','332楼','333楼','334楼'],['341楼','342楼','343楼','344楼']],[['311楼','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,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>
以上是前端之家为你收集整理的uni-app 微信小程序 picker 三级联动全部内容，希望文章能够帮你解决uni-app 微信小程序 picker 三级联动所遇到的程序开发问题。
如果觉得前端之家网站内容还不错，欢迎将前端之家网站推荐给前端开发程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。