##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;
            }
        },
}

最终实现效果点击左边的城市,在右边显示该城市下的学校

 

 

posted @ 2020-12-17 14:48  Jsll  阅读(1366)  评论(0编辑  收藏  举报