uni-app 微信小程序 picker 三级联动

之前做过一个picker的三级联动功能,这里分享代码给大家

具体代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
// An highlighted block
<template>
    <view>
        <picker mode="multiSelector" @change="bindMultiPickerChange" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray">
            <view class="picker" style="display: flex;justify-content:space-around;align-items:center;width: 100%;flex: 1">
                <view class="energy">
                    {{ areaname }}
                    <uni-icons :size="40" class="uni-icon-wrapper" color="#e0e0e0" type="arrowdown" />
                </view>
                <view style="background-color: #50a0d1;height: 50rpx;width: 1px;opacity: 0.5"></view>
                <view class="energy">
                    {{ buildingname }}
                    <uni-icons :size="40" class="uni-icon-wrapper" color="#e0e0e0" type="arrowdown" />
                </view>
                <view style="background-color: #50a0d1;height: 50rpx;width: 1px;opacity: 0.5"></view>
                <view class="energy">
                    {{ floorname }}
                    <uni-icons :size="40" class="uni-icon-wrapper" color="#e0e0e0" type="arrowdown" />
                </view>
            </view>
        </picker>
    </view>
</template>
 
<script>
import Vue from 'vue';
export default {
    data() {
        return {
            multiArray: [['1', '2', '3', '4', '5', '6', '7'], ['1舍', '2舍', '3舍', '4舍'], ['111楼', '112楼', '113楼', '114楼']],
            multiIndex: [0, 0, 0],
            tabindex: 0,
            ydindex: 0,
            firstid: '0',
            secondid: '0',
            thirdid: '0',
            areaname: '1',
            dengswitchvalue: '',
            ktswitchvalue: '',
            buildingname: '1舍',
            floorname: '111楼',
            nowitem: '1-1舍-111楼',
            column1data: [
                //每个院部的楼栋
                ['11舍', '12舍', '13舍', '14舍'],
                // ['21舍', '22舍', '23舍', '24舍'],
                ['21舍'],
                // ['31舍', '32舍', '33舍', '34舍'],
                ['31舍', '32舍'],
                ['41舍', '42舍', '43舍', '44舍'],
                ['51舍', '52舍', '53舍', '54舍'],
                ['61舍', '62舍', '63舍', '64舍'],
                ['71舍', '72舍', '73舍', '74舍']
            ],
            hangdata: [
                //每一栋包含楼层
                [['111楼', '112楼', '113楼', '114楼'], ['121楼', '122楼', '123楼'], ['131楼', '132楼', '133楼', '134楼'], ['141楼', '142楼', '143楼', '144楼']],
                // [['211楼', '212楼', '213楼', '214楼'], ['221楼', '222楼', '223楼', '224楼'], ['231楼', '232楼', '233楼', '234楼'], ['241楼', '242楼', '243楼', '244楼']],
                [['211楼', '212楼', '213楼', '214楼']],
                // [['311楼', '312楼', '313楼', '314楼'], ['321楼', '322楼', '323楼', '324楼'], ['331楼', '332楼', '333楼', '334楼'], ['341楼', '342楼', '343楼', '344楼']],
                [['311楼', '312楼', '313楼', '314楼'], ['321楼', '322楼', '323楼']],
                [['411楼', '412楼', '413楼', '414楼'], ['421楼', '422楼', '423楼', '424楼'], ['431楼', '432楼', '433楼', '434楼'], ['441楼', '442楼', '443楼', '444楼']],
                [['511楼', '512楼', '513楼', '514楼'], ['521楼', '522楼', '523楼'], ['531楼', '532楼', '533楼', '534楼'], ['541楼', '542楼', '543楼', '544楼']],
                [['611楼', '612楼', '613楼', '614楼'], ['621楼', '622楼', '623楼', '624楼'], ['631楼', '632楼', '633楼', '634楼'], ['641楼', '642楼', '643楼', '654楼']],
                [['711楼', '712楼'], ['721楼', '722楼', '723楼'], ['731楼', '732楼', '733楼', '734楼'], ['741楼', '742楼', '743楼', '744楼']]
            ]
        };
    },
    methods: {
        bindMultiPickerChange(e) {
            this.multiIndex = e.detail.value;
            this.areaname = this.multiArray[0][e.detail.value[0]];
            this.buildingname = this.multiArray[1][e.detail.value[1]];
            this.floorname = this.multiArray[2][e.detail.value[2]];
 
            this.nowitem = this.multiArray[0][e.detail.value[0]] + '-' + this.multiArray[1][e.detail.value[1]] + '-' + this.multiArray[2][e.detail.value[2]];
            console.log('选择了:' + this.nowitem);
        },
        bindMultiPickerColumnChange(e) {
            switch (e.detail.column) {
                case 0:
                    this.firstid = e.detail.value;
                    if (typeof this.hangdata[this.firstid][this.secondid] == 'undefined') {
                        this.secondid = 0; //当第二列数据没有上一个second列的情况
                    }
                    switch (e.detail.value) {
                        case this.firstid:
                            Vue.set(this.multiArray, 1, this.column1data[this.firstid]);
                            Vue.set(this.multiArray, 2, this.hangdata[this.firstid][this.secondid]); //为了对应第三列关系
                            break;
                        default:
                            break;
                    }
                    break;
                case 1:
                    this.secondid = e.detail.value;
                    if (typeof this.hangdata[this.firstid][this.secondid][this.thirdid] == 'undefined') {
                        this.thirdid = 0; //当第三列数据没有上一个列的情况
                    }
                    switch (this.firstid) {
                        case this.firstid:
                            switch (this.secondid) {
                                case this.secondid:
                                    Vue.set(this.multiArray, 2, this.hangdata[this.firstid][this.secondid]);
                                    break;
                                default:
                                    break;
                            }
                            break;
                        default:
                            break;
                    }
                case 2:
                    this.thirdid = e.detail.value;
                    break;
                default:
                    break;
            }
        }
    }
};
</script>
 
<style lang="less"></style>

  

posted @   林恒  阅读(2738)  评论(0编辑  收藏  举报
编辑推荐:
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
阅读排行:
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
欢迎阅读『uni-app 微信小程序 picker 三级联动』
点击右上角即可分享
微信分享提示