uniapp开发高校选择器

在开发过程中遇到选择器问题,没有找到较好的插件,于是自己写了一个;
效果如下
在这里插入图片描述
学校的数据
可到我的资源中心下载:高校数据
代码和文件截图如下:在这里插入图片描述
在这里插入图片描述
最后附上完整代码

<view class="school" >
				<text class="icon-font">&#xe688;</text>
				<picker @change="bindPickerChange" mode = 'multiSelector' @columnchange="columnChange" :value="schoolIndex" :range="array" range-key="name">
					<view class="uni-input"  >{{userInfo.school}}</view>
				</picker>
			</view>
**data**:{array: [
					["北京市", "天津市", "河北省", "山西省", "内蒙古自治区", "辽宁省", "吉林省", "黑龙江省", "上海市", "江苏省", "浙江省", "安徽省", "福建省", "江西省", "山东省", "河南省", "湖北省", "湖南省", "广东省", "广西壮族自治区", "海南省", "重庆市", "四川省", "贵州省", "云南省", "西藏自治区", "陕西省", "甘肃省", "青海省", "宁夏回族自治区", "新疆维吾尔自治区"],
					['北京市'],
					["北京大学", "中国人民大学", "清华大学", "北京交通大学", "北京工业大学", "北京航空航天大学", "北京理工大学", "北京科技大学", "北方工业大学", "北京化工大学", "北京工商大学", "北京服装学院", "北京邮电大学", "北京印刷学院", "北京建筑大学", "北京石油化工学院", "北京电子科技学院", "中国农业大学", "北京农学院", "北京林业大学", "北京协和医学院", "首都医科大学", "北京中医药大学", "北京师范大学", "首都师范大学", "首都体育学院", "北京外国语大学", "北京第二外国语学院", "北京语言大学", "中国传媒大学", "中央财经大学", "对外经济贸易大学", "北京物资学院", "首都经济贸易大学", "外交学院", "中国人民公安大学", "国际关系学院", "北京体育大学", "中央音乐学院", "中国音乐学院", "中央美术学院", "中央戏剧学院", "中国戏曲学院", "北京电影学院", "北京舞蹈学院", "中央民族大学", "中国政法大学", "华北电力大学", "中华女子学院", "北京信息科技大学", "中国矿业大学(北京)", "中国石油大学(北京)", "中国地质大学(北京)", "北京联合大学", "北京城市学院", "中国青年政治学院", "首钢工学院", "中国劳动关系学院", "北京吉利学院", "首都师范大学科德学院", "北京工商大学嘉华学院", "北京邮电大学世纪学院", "北京工业大学耿丹学院", "北京警察学院", "北京第二外国语学院中瑞酒店管理学院", "中国科学院大学", "中国社会科学院大学", "北京工业职业技术学院", "北京信息职业技术学院", "北京电子科技职业学院", "北京京北职业技术学院", "北京交通职业技术学院", "北京青年政治学院", "北京农业职业学院", "北京政法职业学院", "北京财贸职业学院", "北京北大方正软件职业技术学院", "北京经贸职业学院", "北京经济技术职业学院", "北京戏曲艺术职业学院", "北京汇佳职业学院", "北京科技经营管理学院", "北京科技职业学院", "北京培黎职业学院", "北京经济管理职业学院", "北京劳动保障职业学院", "北京社会管理职业学院", "北京艺术传媒职业学院", "北京体育职业学院", "北京交通运输职业学院", "北京卫生职业学院", "北京网络职业学院"]	
				],
				schoolIndex: [0, 0, 0],

}

**methods**
columnChange(e){
				this.schoolIndex[e.detail.column] = e.detail.value
				let changeColumn = e.detail.column;
				let changeIndex = e.detail.value;
				let value = this.array[changeColumn][changeIndex];
				console.log(school.school);
				if(changeColumn==0){ //改变省份
					//第二列改为省份的城市
					school.school.forEach(val=>{
						
						if(val.province_name == value){
							//找到所有的城市名称
							let cityArr = [];
							val.cities.forEach(city=>{
								cityArr.push(city.city_name);
							})
							this.array[1] = cityArr;
							this.array[2] = val.cities[0].universities;
							this.schoolIndex = [e.detail.value,0,0]
							return ;
						}
					})
					
				}else if(changeColumn==1){
					let pro = this.schoolIndex[0];
					//改变城市
					school.school.forEach(val=>{
						val.cities.forEach(city=>{
							if(city.city_name == value){
								this.array[2] = city.universities;
								this.schoolIndex = [pro,e.detail.value,0]
								return ;
							}
						})
					})
				}
				
				
				
				
			},
			bindPickerChange(e) {
				
				this.schoolIndex = e.target.value;
				
				this.setSchool(this.array[2][this.schoolIndex[2]]);
			},
			//获取学校数据
			getSchool(){
				let _this = this;
				uni.request({
					url:this.$url+"/getSchool",
					success(res) {
						console.log(res.data.data);
						_this.array = _this.array.concat(res.data.data);
					},
					error(){
						uni.showToast({
							title:"请求失败"
						})
					}
				})
			},

最后,欢迎关注和探讨有关技术问题!!

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

东哥aigc

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值