关于 picker 组件的多列 mode = multiSelector 的记录

官方链接。PS： 官方链接没有做数组对象例子。只有对象。我也是写了对象

https://github.com/weilanwl/coloruicss/blob/master/Colorui-UniApp/pages/component/form.vue

 

template 代码块 PS：不要删除任何代码。这里的代码都有用的

<!-- #ifndef MP-ALIPAY -->
            <view class="cu-form-group">
                <view class="title">多列选择</view>
                <picker mode="multiSelector" @change="MultiChange" @columnchange="MultiColumnChange" :value="multiIndex" :range="multiArray">
                    <view class="picker">
                        {{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}} // 俩列就保持俩个，{{multiArray[2][multiIndex[2]]}} 可以删除

</view> </picker> </view>

 

 data代码块

    //俩列 multiArray 保留二维数组就好，三列保持三维数组
                multiArray: [
                    ['无脊柱动物', '脊柱动物'],
                    ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'],
                    ['猪肉绦虫', '吸血虫'] 
                ],
multiIndex: [0, 0, 0], //同理设置默认显示，俩位保持俩个，三列就是三个

 

JS 代码块

MultiChange(e) {
                this.multiIndex = e.detail.value
            },
            MultiColumnChange(e) {
                let data = {
                    multiArray: this.multiArray,
                    multiIndex: this.multiIndex
                };
                data.multiIndex[e.detail.column] = e.detail.value;
                switch (e.detail.column) {
                    case 0: //选择第一列第一个
                        switch (data.multiIndex[0]) {
                            case 0://第二列第一个
                                data.multiArray[1] = ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'];
                                data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
                                break;
                            case 1://第二列第二个
                                data.multiArray[1] = ['鱼', '两栖动物', '爬行动物'];
                                data.multiArray[2] = ['鲫鱼', '带鱼'];
                                break;
                        }
                        data.multiIndex[1] = 0;
                        data.multiIndex[2] = 0;
                        break;
                    case 1: //第一列第二个
                        switch (data.multiIndex[0]) { 
                            case 0: 
                                switch (data.multiIndex[1]) {
                                    case 0:
                                        data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
                                        break;
                                    case 1:
                                        data.multiArray[2] = ['蛔虫'];
                                        break;
                                    case 2:
                                        data.multiArray[2] = ['蚂蚁', '蚂蟥'];
                                        break;
                                    case 3:
                                        data.multiArray[2] = ['河蚌', '蜗牛', '蛞蝓'];
                                        break;
                                    case 4:
                                        data.multiArray[2] = ['昆虫', '甲壳动物', '蛛形动物', '多足动物'];
                                        break;
                                }
                                break;
                            case 1:
                                switch (data.multiIndex[1]) {
                                    case 0:
                                        data.multiArray[2] = ['鲫鱼', '带鱼'];
                                        break;
                                    case 1:
                                        data.multiArray[2] = ['青蛙', '娃娃鱼'];
                                        break;
                                    case 2:
                                        data.multiArray[2] = ['蜥蜴', '龟', '壁虎'];
                                        break;
                                }
                                break;
                        }
                        data.multiIndex[2] = 0;
                        break;
                }
                this.multiArray = data.multiArray;
                this.multiIndex = data.multiIndex;
            },