在开发过程中遇到选择器问题,没有找到较好的插件,于是自己写了一个;
效果如下
学校的数据
可到我的资源中心下载:高校数据
代码和文件截图如下:
最后附上完整代码
<view class="school" >
<text class="icon-font"></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:"请求失败"
})
}
})
},
最后,欢迎关注和探讨有关技术问题!!