微信小程序 自定义picker封装成插件实现二级三级四级联动

微信小程序 自定义picker封装成插件实现二级三级四级联动

页面调用

// array  picker 的数组
// active  picker 几级
// multiIndex picker 的回显
<PickerGroup array="{{array}}" active="{{4}}" multiIndex="{{[0,1,1,3]}}"></PickerGroup>

HTML

<view style="background:#FFF;padding:15px 0;">
    <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange"
        range="{{defaultarray}}" value="{{multiIndex}}">
        <text>{{defaultarray[0][multiIndex[0]]}}</text>
        <text wx:if="{{defaultarray.length>=2}}"> - {{defaultarray[1][multiIndex[1]]}}</text>
        <text wx:if="{{defaultarray.length>=3}}"> - {{defaultarray[2][multiIndex[2]]}}</text>
        <text wx:if="{{defaultarray.length>=4}}"> - {{defaultarray[3][multiIndex[3]]}}</text>
    </picker>
</view>

js

Component({
    options: {
        styleIsolation: 'apply-shared'
    },
    properties: {
        active: Number, //  显示几级picker
        array: Array, // array 数据
        multiIndex: Array, // 回显数据
    },
    /**
     * 页面的初始数据  
     */
    data: {
        // 试例数据
        // array: [{
        //     title: '一级列表1',
        //     children: [{
        //         title: '二级列表1',
        //         children: [{
        //             title: '三级列表1',
        //             children: [{
        //                 title: '四级列表1'
        //             }, {
        //                 title: '四级列表2'
        //             }, {
        //                 title: '四级列表3'
        //             }, {
        //                 title: '四级列表4'
        //             }, {
        //                 title: '四级列表5'
        //             }]
        //         }, {
        //             title: '三级列表2',
        //             children: [{
        //                 title: '四级列表21'
        //             }, {
        //                 title: '四级列表22'
        //             }, {
        //                 title: '四级列表23'
        //             }, {
        //                 title: '四级列表24'
        //             }, {
        //                 title: '四级列表25'
        //             }]
        //         }, {
        //             title: '三级列表3',
        //             children: [{
        //                 title: '四级列表31'
        //             }, {
        //                 title: '四级列表32'
        //             }, {
        //                 title: '四级列表33'
        //             }, {
        //                 title: '四级列表34'
        //             }, {
        //                 title: '四级列表35'
        //             }]
        //         }]
        //     }, {
        //         title: '二级列表2',
        //         children: [{
        //             title: '三级列表21',
        //             children: [{
        //                 title: '四级列表211'
        //             }, {
        //                 title: '四级列表212'
        //             }, {
        //                 title: '四级列表213'
        //             }, {
        //                 title: '四级列表214'
        //             }, {
        //                 title: '四级列表215'
        //             }]
        //         }, {
        //             title: '三级列表22',
        //             children: [{
        //                 title: '四级列表221'
        //             }, {
        //                 title: '四级列表222'
        //             }, {
        //                 title: '四级列表223'
        //             }]
        //         }, {
        //             title: '三级列表23',
        //             children: [{
        //                 title: '四级列表231'
        //             }, {
        //                 title: '四级列表232'
        //             }]
        //         }]
        //     }]
        // }, {
        //     title: '一级列表2',
        //     children: [{
        //         title: '卡班组1',
        //         children: [{
        //             title: '卡数据线1',
        //             children: [{
        //                 title: '卡传感量1'
        //             }, {
        //                 title: '卡传感量2'
        //             }, {
        //                 title: '卡传感量3'
        //             }, {
        //                 title: '卡传感量4'
        //             }, {
        //                 title: '卡传感量5'
        //             }]
        //         }, {
        //             title: '卡数据线2',
        //             children: [{
        //                 title: '卡传感量21'
        //             }, {
        //                 title: '卡传感量22'
        //             }, {
        //                 title: '卡传感量23'
        //             }, {
        //                 title: '卡传感量24'
        //             }]
        //         }, {
        //             title: '卡数据线3',
        //             children: [{
        //                 title: '卡传感量31'
        //             }, {
        //                 title: '卡传感量32'
        //             }, {
        //                 title: '卡传感量33'
        //             }]
        //         }]
        //     }, {
        //         title: '卡班组2',
        //         children: [{
        //             title: '卡数据线21',
        //             children: [{
        //                 title: '卡传感量211'
        //             }, {
        //                 title: '卡传感量212'
        //             }]
        //         }, {
        //             title: '卡数据线22',
        //             children: [{
        //                 title: '卡传感量221'
        //             }, {
        //                 title: '卡传感量222'
        //             }, {
        //                 title: '卡传感量223'
        //             }]
        //         }, {
        //             title: '卡数据线23',
        //             children: [{
        //                 title: '卡传感量231'
        //             }, {
        //                 title: '卡传感量232'
        //             }]
        //         }]
        //     }]
        // }],
        defaultarray: [
            [],
            [],
            [],
            []
        ],

    },
    pageLifetimes: {
        show: function (options) {
            var that = this;
            var defaultarray = that.data.defaultarray
            var array = that.data.array
            console.log(array)
            console.log(that.data.active)
            //给defaultarray里的第1个数组赋值
            for (var i = 0, len = array.length; i < len; i++) {
                defaultarray[0].push(array[i].title)
            }
            // 给defaultarray里的第2个数组赋值
            if (this.data.active >= 2) {
                for (var i = 0, len = array[0].children.length; i < len; i++) {
                    defaultarray[1].push(array[0].children[i].title)
                }
            }
            // 给defaultarray里的第3个数组赋值
            if (this.data.active >= 3) {
                for (var i = 0, len = array[0].children[0].children.length; i < len; i++) {
                    defaultarray[2].push(array[0].children[0].children[i].title)
                }
            }
            if (this.data.active >= 4) {
                // 给defaultarray里的第4个数组赋值
                for (var i = 0, len = array[0].children[0].children[0].children.length; i < len; i++) {
                    defaultarray[3].push(array[0].children[0].children[0].children[i].title)
                }
            }
            defaultarray.length = this.data.active
            if(this.data.multiIndex.length<=0){
                that.setData({
                    multiIndex: ("").padEnd(this.data.active,0).split("").map(x=>parseInt(x)),
                })
            }
            // 渲染
            that.setData({
                defaultarray: defaultarray,
            })
            //！！！！！！！！要展示到界面的数据一定要用setdata!!!!!!!!!
            // that.data.defaultarray = defaultarray
            console.log(defaultarray)
            console.log()

        },
    },
    methods: {
        bindMultiPickerChange: function (e) {
            console.log('选中的值为', e.detail.value)
            this.setData({
                multiIndex: e.detail.value
            })
        },
        bindMultiPickerColumnChange: function (e) {
            console.log('修改的列为', e.detail.column, '，（列下标）值为', e.detail.value);

            var that = this;
            var defaultarray = that.data.defaultarray,
                array = that.data.array,
                multiIndex = that.data.multiIndex

            // 更改multiIndex
            multiIndex[e.detail.column] = e.detail.value

            // 联动变化defaultarray数组
            var searchColumn = () => {
                for (var i = 0; i < array.length; i++) {
                    var arr1 = []; //defaultarray[1]
                    var arr2 = []; //defaultarray[2]
                    var arr3 = []; //defaultarray[3]
                    if (i == multiIndex[0]) { //找到修改的列号i
                        for (var j = 0; j < array[i].children.length; j++) {
                            arr1.push(array[i].children[j].title);
                            if (this.data.active >= 3) {
                                if (j == multiIndex[1]) {
                                    for (var k = 0; k < array[i].children[j].children.length; k++) {
                                        arr2.push(array[i].children[j].children[k].title);
                                        if (this.data.active >= 4) {
                                            if (k == multiIndex[2]) {
                                                for (var g = 0; g < array[i].children[j].children[k].children.length; g++) {
                                                    arr3.push(array[i].children[j].children[k].children[g].title);
                                                }
                                                defaultarray[3] = arr3;
                                            }
                                        }

                                    }
                                    defaultarray[2] = arr2;
                                }
                            }

                        }
                        defaultarray[1] = arr1;
                    }
                };
            }

            switch (e.detail.column) {
                case 0:
                    multiIndex[1] = 0;
                    multiIndex[2] = 0;
                    multiIndex[3] = 0;
                    searchColumn();
                    break;
                case 1:
                    multiIndex[2] = 0;
                    multiIndex[3] = 0;
                    searchColumn();
                    break;
                case 2:
                    multiIndex[3] = 0;
                    searchColumn();
                    break;

            }
            this.setData({
                defaultarray: defaultarray,
                multiIndex: multiIndex
            });


        },
    },



})

下载地址: link