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

最終實現效果點擊左邊的城市,在右邊顯示該城市下的學校

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM