zoukankan      html  css  js  c++  java
  • 小程序picker自定义三级联动

    wxml;


    <picker name="create_id" mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindGradeChange" value="{{multiIndex}}" range="{{multiArray}}" range-key="{{'title'}}">
    <view class='pick-content'>
    <text>{{multiArray[0][multiIndex[0]].title}},{{multiArray[1][multiIndex[1]].title}},{{multiArray[2][multiIndex[2]].title}}</text>
    </view>
    </picker>

    js

    bindMultiPickerChange: function (e) {
    this.setData({
    multiIndex: e.detail.value
    })
    },
    bindGradeChange(e) {
    console.log('修改的列为', e.detail.column, ',值为', e.detail.value);
    let data = {
    multiArray: this.data.multiArray,
    multiIndex: this.data.multiIndex
    }
    data.multiIndex[e.detail.column] = e.detail.value
    if (e.detail.column == 0) {
    var grade = this.data.multiArray[0][data.multiIndex[0]];
    data.multiArray[1] = this.data.allGrade[grade.id].teams
    data.multiIndex[1] = 0;
    var classes = data.multiArray[1][0];
    let arr = this.data.allStudents[classes.id] ? this.data.allStudents[classes.id] : [];
    data.multiArray[2] = arr
    data.multiIndex[2] = 0
    } else if (e.detail.column == 1) {
    var classes = this.data.multiArray[1][data.multiIndex[1]];
    let arr = this.data.allStudents[classes.id] ? this.data.allStudents[classes.id] : [];
    data.multiArray[2] = arr
    data.multiIndex[2] = 0
    }
    this.setData(data);
    },

    数据格式(以年级为例)

    [ {
    title: '一年级',
    id: 1
    }, {
    title: '二年级',
    id: 2
    }, {
    title: '三年级',
    id: 3
    }, {
    title: '四年级',
    id: 4
    }, {
    title: '五年级',
    id: 5
    }, {
    title: '六年级',
    id: 6
    }
    ]

    效果

  • 相关阅读:
    JS-字符串截取方法slice、substring、substr的区别
    Vue中computed和watch的区别
    Vue响应式原理及总结
    JS实现深浅拷贝
    JS中new操作符源码实现
    点击页面出现爱心效果
    js判断对象是否为空对象的几种方法
    深入浅出js实现继承的7种方式
    es6-class
    详解 ESLint 规则,规范你的代码
  • 原文地址:https://www.cnblogs.com/xinheng/p/14684169.html
Copyright © 2011-2022 走看看