小程序 多个同时选择器

html

<view class="titTop">

                    <view wx:for="{{objArray}}" wx:for-item="itm" wx:for-index="idx" wx:key="idx">

                        <picker class="inputText" bindchange="bindChange_select" value="{{itm.index}}" data-current="{{idx}}" range="{{itm.option}}"  range-key="{{'labe'}}">

                            <view class="{{idx === 3 ? 'pickeres' : 'picker' }}">

                                {{itm.option[itm.index].labe}}

                                <image wx:if="{{idx<3}}" src="../../images/botmg.png"></image>

                                <image wx:if="{{idx>2}}" src="../../images/botmw.png"></image>

                            </view>

                        </picker>

                    </view>

                </view>

js

 // 选择器

    bindChange_select(ev) {

        // 定义一个变量curindex 储存触发事件的数组对象的下标

        const curindex = ev.target.dataset.current

        // 根据下标 改变该数组对象中的index值

        this.data.objArray[curindex].index = ev.detail.value

        console.log(curindex, ev.detail.value);

        if (curindex === 0) {

            const id = this.data.objArray[0].option[ev.detail.value].value

            this.spaceId = id

            this.getTree(id, 1)

        } else if (curindex === 1) {

            const id = this.data.objArray[1].option[ev.detail.value].value

            if (id == -1) {

                this.spaceId = this.data.objArray[0].option[ev.detail.value].value

            } else {

                this.spaceId = id

            }

            this.getTree(id, 2)

        } else if (curindex === 2) {

            const id = this.data.objArray[2].option[ev.detail.value].value

            const ides = this.data.objArray[1].option[this.data.objArray[1].index].value

            if (id == -1 && ides != -1) {

                this.spaceId = ides

            } else if (id == -1 && ides == -1) {

                this.spaceId = this.data.objArray[0].option[ev.detail.value].value

            } else {

                this.spaceId = id

            }

        }

        // 把改变某个数组对象index值之后的全新objArray重新 赋值给objArray

        this.setData({

            objArray: this.data.objArray

        })

        if (curindex === 3) {

            const sysMark = this.data.objArray[3].option[ev.detail.value].value

            let obje = {

                sysMark: sysMark,

                spaceId: this.spaceId

            }

            this.getalarmList(obje)

        }

    },

data

objArray: [{

                index: 0,

                option: [],

            },

            {

                index: 0,

                option: [{

                    labe: '全部',

                    value: '1'

                }],

            },

            {

                index: 0,

                option: [{

                    labe: '全部',

                    value: '1'

                }]

            },

            {

                index: 0,

                option: [{

                    labe: '全部',

                    value: '1'

                }, {

                    labe: '监控',

                    value: 'monitor'

                }, {

                    labe: '消防',

                    value: 'firefighting'

                }, {

                    labe: '门禁',

                    value: 'gates'

                }, {

                    labe: '环控',

                    value: 'control'

                }, {

                    labe: '停车',

                    value: 'parking'

                }, {

                    labe: '照明',

                    value: 'illumination'

                }, {

                    labe: '能耗',

                    value: 'ammeter'

                }, {

                    labe: '电梯',

                    value: 'elevator'

                }, {

                    labe: '空调',

                    value: 'airConditioner'

                }]

            },

        ],

css

.titTop {

    display: flex;

    color: #1FAF99;

    margin-top: 30rpx;

}

.picker {

    margin-right: 5px;

    width: 130rpx;

    overflow: hidden;

    white-space: nowrap;

    background: #FFFFFF;

    border-radius: 2px;

    border: 1px solid #1FAF99;

    text-align: center;

    font-size: 12px;

    line-height: 24px;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

}

.pickeres {

    margin-left: 110rpx;

    padding: 0 15rpx;

    background: #1FAF99;

    color: #fff;

    border-radius: 2px;

    border: 1px solid #1FAF99;

    text-align: center;

    font-size: 12px;

    line-height: 24px;

}