微信小程序picker多级下拉，动态列数

废话不多说，先上效果图：

当选择幼儿园的时候，只有两级下拉。当选择一级选项的时候，有三级下拉。

上代码：

1.测试数据

// 测试数据，树形结构，仅以三级为例，可以随意增加缩减
{
        
    id: "tree_select1",
    name: "tree_select",
    items: [
        {
            text: "幼儿园", 
            level: 1, 
            children: [
                {
                    text: "小班", 
                    level: 2, 
                    children: []
                },
                {
                    text: "中班", 
                    level: 2, 
                    children: []
                }, 
                {
                    text: "大班", 
                    level: 2, 
                    children: []
                }
            ]
        },
        {
            text: "一级选项", 
            level: 1, 
            children: [
                {
                    text: "一年级", 
                    level: 2, 
                    children: [
                        {text: '1班', level: 3}, 
                        {text: '2班', level: 3}
                    ]
                }, 
                {
                    text: "二年级", 
                    level: 2, 
                    children: []
                }, 
                {
                    text: "3", 
                    level: 2, 
                    children: []
                }
            ]
        },
        {
            text: "一级选项", 
            level: 1, 
            children: [
                {
                    text: "7", 
                    level: 2, 
                    children: [
                        {text: '3班', level: 3}, 
                        {text: '4班', level: 3}
                    ]
                }, 
                {
                    text: "8", 
                    level: 2, 
                    children: []
                }, 
                {
                    text: "9", 
                    level: 2, 
                    children: []
                }
            ]
        }
    ]
}

 2.wxml，此处popup使用了vant weapp

// 注意引用位置
<wxs src="../tool.wxs" module="tools" />

// input展示选中的数据，点击打开popup展示下拉
<input type="text" value="{{ tools.join(value, ' - ') }}" disabled placeholder="{{ item.placeholder }}" placeholder-style="color: #D1D2DB;" class="{{ !!item.errorMsg ? 'border-error' : 'border' }} mt-1 p-2 round-conner font-size-14 position-sticky" bindtap="openPop" />


<van-popup show="{{isShowPop}}" bind:close="cancelClick" position="bottom" round custom-style="height: 30%;">
    <view style="margin: 24rpx;">
        <!-- 操作按钮 -->
        <view class="d-flex justify-content-between">
            <view bindtap="cancelClick" class="cancel-text">取消</view>
            <view bindtap="confirmClick" class="confirm-text">确认</view>
        </view>

        <!-- 下拉数据 -->
        <picker-view class="w-100" style="height: 300rpx;" value="{{ selectValue }}" bindchange="bindChange">
            <picker-view-column wx:if="{{ firstItems.length > 0 }}">
                <view wx:for="{{firstItems}}" wx:key="index" class="pick-view-column">{{ item }}</view>
            </picker-view-column>
            <picker-view-column wx:if="{{ secondItems.length > 0 }}">
                <view wx:for="{{secondItems}}" wx:key="index" class="pick-view-column">{{ item }}</view>
            </picker-view-column>
            <picker-view-column wx:if="{{ thirdItems.length > 0 }}">
                <view wx:for="{{thirdItems}}" wx:key="index" class="pick-view-column">{{ item }}</view>
            </picker-view-column>
        </picker-view>
    </view>
</van-popup>

附wsx代码，需在wxml中引用后方可使用，tools.join： 

module.exports = {
    join: function (array, character) {
        var str = ''
        for (var i = 0; i < array.length; ++i) {
            if (i === 0) {
                str += array[i]
            } else {
                str += character + array[i]
            }
        }
        return str
}

3.wsxx样式（基本都是用的bootstrap）：

.border {
	border: 2rpx solid #dee2e6 !important;
}
.border-error {
	border: 2rpx solid #ff4d4f !important;
}
.mt-1,
.my-1 {
	margin-top: 0.25rem !important;
}
.p-2 {
	padding: 0.5rem !important;
}
.round-conner {
	border-radius: 10rpx;
}
.font-size-14 {
	font-size: 28rpx;
}
.position-sticky {
	position: -webkit-sticky !important;
	position: sticky !important;
}
.d-flex {
	display: flex !important;
}
.justify-content-between {
	-ms-flex-pack: justify !important;
	justify-content: space-between !important;
}
.w-100 {
    width: 100%;
}
.h-100 {
    height: 100%;
}
.pick-view-column {
    line-height: 72rpx;
    text-align: center;
    font-size: 12px;
}
.cancel-text {
    color: #7f7f7f;
    font-size: 32rpx;
}
.confirm-text {
    color: #00c466;
    font-size: 32rpx;
}

4.部分最重要的js代码：

// 点击input框 打开popup事件 
openPop() {
            // 处理数据
            const items = this.data.item.items
            const initSelect = this.data.item.selectValue // 此数据为默认选中的数据
            let firstItems = []
            let secondItems = []
            let thirdItems = []
            let selectValue = []
            firstItems = items.map(it => it.text)
            const selectValue1 = initSelect?.length > 0 ? initSelect[0] : 0
            const child1 = items[selectValue1]
            selectValue = [selectValue1]
            if (!!child1?.children && child1.children.length > 0) {
                secondItems = child1.children.map(it => it.text)
                const selectValue2 = initSelect?.length > 1 ? initSelect[1] : 0
                const child2 = child1.children[selectValue2]
                selectValue = [selectValue1, selectValue2]
                if (!!child2?.children && child2.children.length > 0) {
                    const selectValue3 = initSelect?.length > 2 ? initSelect[2] : 0
                    thirdItems = child2.children.map(it => it.text)
                    selectValue = [selectValue1, selectValue2, selectValue3]
                }
            }

            wx.hideTabBar() // 隐藏底部导航菜单，酌情使用
            this.setData({
                isShowPop: true,
                firstItems, // 第一列数据
                secondItems, // 第二列数据
                thirdItems, // 第三列数据
                selectValue // 已选中的数据
            })
        },


// 取消按钮点击事件
cancelClick() {
            this.setData({
                isShowPop: false
            })
            setTimeout(function () {wx.showTabBar()}, 300) // 显示底部导航菜单，有隐藏时使用
        },


// 确认按钮点击事件，保存选中的参数
confirmClick() {
            //  展示的值
            const item = this.data.item
            const selectValue = this.data.selectValue
            var value = ''
            if (selectValue.length > 0) {
                const value1 = item.items[selectValue[0]].text
                value = [value1]
                if (selectValue.length > 1) {
                    const value2 = item.items[selectValue[0]].children[selectValue[1]].text
                    value = [value1, value2]
                    if (selectValue.length > 2) {
                        const value3 = item.items[selectValue[0]].children[selectValue[1]].children[selectValue[2]].text
                        value = [value1, value2, value3]
                    }
                }
            }

            // 更新展示
            this.setData({
                isShowPop: false,
                value: value
            })
            setTimeout(function () {wx.showTabBar()}, 300) // 显示底部导航菜单，有隐藏时使用

            // 将数据传出去
            item.selectValue = selectValue
            item.value = value
            this.triggerEvent('treePicker', item)
        },


// 滚动选项，触发事件
bindChange(event) {
            const value = event.detail.value

            let firstItems = []
            let secondItems = []
            let thirdItems = []
            let selectValue1 = 0
            let selectValue2 = 0
            let selectValue3 = 0
            var selectValue = []
            // 处理数据
            const items = this.data.item.items
            firstItems = items.map(it => it.text)
            selectValue1 = value.length > 0 ? value[0] : 0
            const child1 = items[selectValue1]
            selectValue = [selectValue1]
            if (!!child1?.children && child1.children.length > 0) {
                secondItems = child1.children.map(it => it.text)
                selectValue2 = value.length > 1 ? value[1] : 0
                selectValue = [selectValue1, selectValue2]
                const child2 = child1.children[selectValue2]
                
                if (!!child2?.children && child2.children.length > 0) {
                    thirdItems = child2.children.map(it => it.text)
                    selectValue3 = value.length > 2 ? value[2] : 0
                    selectValue = [selectValue1, selectValue2, selectValue3]
                }
            }
            this.setData({
                firstItems,
                secondItems,
                thirdItems,
                selectValue
            })
        },

完结撒盐！