A痞子  2023-02-12 21:12 采纳率: 73.8%
浏览 35
已结题

如何让我的数组像picker 示例那样上下级联动

如何让我的数组像picker 示例那样上下级联动
这是我的数组:

img


1数组是一级分类

img


2、3数组是二级分类

img

如何把我上面的数组做成下面可以一二及联动的picker


```bash
<picker mode="multiSelector" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray">
                        <view class="uni-input">{{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}},</view>
                    </picker>

<script>
    export default {
        data(){
             return{
    a2:[],
        a3: {id1:'3',id2:'addoil',id3:''},
multiArray: [
                    ['亚洲', '欧洲'],
                    ['中国', '日本'],
                    ['北京', '上海', '广州'],
            
                ],
                multiIndex: [0, 0, 0],//设置默认排序
        
                }
                },

            methods:{ // methods包裹函数
            bindPickerChange: function(e) {
                console.log('picker发送选择改变,携带值为:' + e.detail.value)
                this.index = e.detail.value
            },
            bindMultiPickerColumnChange: function(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
                }
                this.$forceUpdate()
            },
            onLoad: function (option) { //option为object类型,会序列化上个页面传递的参数
            
        
                this.a3.id3 = option.id

            this.getData()//调用函数
            },
            //下拉刷新
            onPullDownRefresh() {
                console.log('下拉了')
            
                    // this.getData() //调用加载数据方法
                },
        //封装调用函数

              getData(){
                  //开始调用封装函数
    
                  this.request({
                      url:'1.asp',
                      method: '',
                    data:this.a3,
                       header:'content-type: application/x-www-form-urlencoded'
                       })
                       .then(res => {
                             console.log(res)
                             this.a2=res
                    
                     })
                        },
                        //结束封装调用函数
                        }
    }
    
</script>

```

  • 写回答

3条回答 默认 最新

  • 阳光宅男xxb 2023-02-13 08:14
    关注

    你可以将的你数组中的数据分别放到两个select组件中,然后在组建中实现下拉框的联动效果:
    VUE 实现select联动效果:
    https://blog.csdn.net/sunny1660/article/details/79362684
    望采纳哦

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 2月27日
  • 已采纳回答 2月19日
  • 创建了问题 2月12日

悬赏问题

  • ¥170 如图所示配置eNSP
  • ¥20 docker里部署springboot项目,访问不到扬声器
  • ¥15 netty整合springboot之后自动重连失效
  • ¥15 悬赏!微信开发者工具报错,求帮改
  • ¥20 wireshark抓不到vlan
  • ¥20 关于#stm32#的问题:需要指导自动酸碱滴定仪的原理图程序代码及仿真
  • ¥20 设计一款异域新娘的视频相亲软件需要哪些技术支持
  • ¥15 stata安慰剂检验作图但是真实值不出现在图上
  • ¥15 c程序不知道为什么得不到结果
  • ¥15 键盘指令混乱情况下的启动盘系统重装