编程大白话之-uni-app简易多列选择

最近很多人使用uniapp来进行开发，我也看到了很多的插件、组件等，对一些感兴趣的进行了测试，下面给大家分享一个多列选择器的效果。

需求：需要一个多层级的选择器，子级要跟随父级的改变进行改变。

<!-- 多列选择 -->
                <view class="select-list ">
                    <view class="">
                        <view class="uni-input flex-dire-row ">
                            <text>测试集</text>
                            <image src="../../static/img/expand.png" mode=""></image>
                        </view>
                        <picker mode="multiSelector" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray">
                            <view class="options">{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}</view>
                        </picker>
                    </view>
                </view>

// 多列选择器
                multiArray: [
                    ['亚洲', '欧洲'],
                    ['中国', '日本'],
                    ['北京', '上海', '广州']
                ],
                multiIndex: [0, 0, 0],

// 多列选择器
            bindMultiPickerColumnChange: function(e) {
                console.log(e, 'e多列')
                console.log('修改的列为：' + e.detail.column + '，值为：' + e.detail.value)
                this.multiIndex[e.detail.column] = e.detail.value
                switch (e.detail.column) {
                    case 0: //拖动第1列
                        switch (this.multiIndex[0]) {
                            case 0:
                                this.multiArray[1] = ['中国', '日本']
                                this.multiArray[2] = ['北京', '上海', '广州']
                                break
                            case 1:
                                this.multiArray[1] = ['英国', '法国']
                                this.multiArray[2] = ['伦敦', '曼彻斯特']
                                break
                        }
                        this.multiIndex.splice(1, 1, 0)
                        this.multiIndex.splice(2, 1, 0)
                        break
                    case 1: //拖动第2列
                        switch (this.multiIndex[0]) { //判断第一列是什么
                            case 0:
                                switch (this.multiIndex[1]) {
                                    case 0:
                                        this.multiArray[2] = ['北京', '上海', '广州']
                                        break
                                    case 1:
                                        this.multiArray[2] = ['东京','北海道']
                                        break
                                }
                                break
                            case 1:
                                switch (this.multiIndex[1]) {
                                    case 0:
                                        this.multiArray[2] = ['伦敦', '曼彻斯特']
                                        break
                                    case 1:
                                        this.multiArray[2] = ['巴黎', '马赛']
                                        break
                                }
                                break
                        }
                        this.multiIndex.splice(2, 1, 0)
                        break
                    
                }
            },