uni-app 微信小程序 picker 三级联动

之前做过一个picker的三级联动功能，这里分享代码给大家

具体代码：

// An highlighted block<template>	<view>		<picker mode="multiSelector" @change="bindMultiPickerChange" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray">			<view >				<view >					{{ areaname }}					<uni-icons :size="40" color="#e0e0e0" type="arrowdown" />				</view>				<view ></view>				<view >					{{ buildingname }}					<uni-icons :size="40" color="#e0e0e0" type="arrowdown" />				</view>				<view ></view>				<view >					{{ floorname }}					<uni-icons :size="40" 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>

　　

原文转载：http://www.shaoqun.com/a/504865.html

跨境电商：https://www.ikjzd.com/

cima：https://www.ikjzd.com/w/1372

亿恩：https://www.ikjzd.com/w/1461

之前做过一个picker的三级联动功能，这里分享代码给大家具体代码：//Anhighlightedblock<template> <view> <pickermode="multiSelector"@change="bindMultiPickerChange"@columnchange="bindMultiPicke
stylenanda：stylenanda
weebly：weebly
女子携家人在温江度假 熟睡中酒店天花板掉下来：女子携家人在温江度假 熟睡中酒店天花板掉下来
【沙巴旅游攻略图片】--沙巴旅游情况：【沙巴旅游攻略图片】--沙巴旅游情况
南海影视城4月好玩活动？佛山南海影视城怎么样？：南海影视城4月好玩活动？佛山南海影视城怎么样？