欢迎光临
我的个人博客网站

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, 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> 

  

赞(0) 打赏
未经允许不得转载:张拓的天空 » uni-app 微信小程序 picker 三级联动
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏