zoukankan      html  css  js  c++  java
  • ##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;
                }
            },
    }

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

  • 相关阅读:
    基于摸板匹配的目標跟蹤算法
    spoj 2713 Can you answer these queries IV
    zoj 3633 Alice's present
    hdu 3642 Get The Treasury
    poj 1195 Mobile phones
    poj 2760 End of Windless Days
    zoj 3540 Adding New Machine
    spoj 1716 Can you answer these queries III
    spoj 1043 Can you answer these queries I
    spoj 2916 Can you answer these queries V
  • 原文地址:https://www.cnblogs.com/jstll/p/14149600.html
Copyright © 2011-2022 走看看