##uniapp 二级联动
根据公司需求写的,仅供参考!
<!-- 所在学校 --> <view class="editor_item"> <view class="box"> <text class="name_E">所在大学</text> <view class="uni-list-cell-db"> <picker mode="multiSelector" @change="bindDateChange" @columnchange="bindMultiPickerColumnChange" range-key="" :value="cityname + studio" :range="years" > <view class="uni-input E_name">{{ editinfo.university }} {{ years[0][multiIndex[0]] }}{{ years[1][multiIndex[1]] }} </view> </picker> </view> </view> <image class="next" src="../../../static/images/right.png" mode=""></image> </view>
data() { title: 'picker', years: [[], []], name: '', //姓名 signature: '', //个性签名 school: [], cityname: [], //所有省份 studio: [], //所有画室 multiArray: [], multiIndex: ['', ''], selectChild: [] }, onLoad() { this.schools(); }, methods:{ // 选择学校 bindDateChange: function(e) { console.log(e); this.editinfo.university = ''; this.cityname = e.detail.value[0]; this.studio = e.detail.value[1]; }, async schools() { let result = await uni.request({ url: '接口地址' }); let [err, res] = result; if (res.statusCode === 200) { this.school = res.data.data; //所有的城市 console.log(this.school); let selectChild = []; const arrOne = this.school.map(item => { this.cityname = item.province; item['selectChild'] = []; if (item.universities) { var arr = []; item.universities.map(child => { item['selectChild'].push(child.name); }); selectChild.push(item['selectChild']); } return item.province; //将名称分到一个数组里 }); const arrTwo = this.school[0].universities.map(item => { this.studio = item.name; return item.name; }); this.years[0] = arrOne; this.years[1] = arrTwo; this.selectChild = selectChild; console.log(this.selectChild); } }, bindMultiPickerColumnChange(e) { console.log(e); if (e.detail.column === 0) { console.log(this.selectChild); this.years[1] = this.selectChild[e.detail.value]; this.multiIndex[0] = e.detail.value; console.log(this.multiIndex[0]); } else if (e.detail.column === 1) { this.multiIndex[1] = e.detail.value; } }, }
最终实现效果点击左边的城市,在右边显示该城市下的学校