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

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

  • 相关阅读:
    MySQL 8.0系列——轻松改配置,云上友好
    测试expire_logs_days参数
    mongodb单实例安装
    搭建PXC集群指引
    控制mysqldump导出的SQL文件的事务大小
    实战MySQL8.0.17 Clone Plugin
    windows环境下 curl 安装和使用
    git 创建tag , 查看tag , 删除tag
    git 基本操作
    git 一个分支完全覆盖另一个分支
  • 原文地址:https://www.cnblogs.com/jstll/p/14149600.html
Copyright © 2020-2023  润新知