更新记录

1.0.6（2023-03-06）

1.新增主题颜色属性themeColor 2.新增空数据显示，空数据显示插槽

1.0.5（2023-03-03）

更新插件属性说明

1.0.4（2023-03-02）

调整宽度

平台兼容性

lzl-picker-data

说明

lzl-picker-data 是一个可以动态加载数据的单列、多列级联选择器，常用于省市区城市选择、公司部门选择、多级分类动态加载等场景

属性说明

插槽Slots

使用案例如下

<template>
    <view>
        <view class="" @click="onOpen">
            {{dataStr ? dataStr : '请选择'}}
        </view>
        <lzl-picker-data ref="lzlPicker" @change="" @select="" :maxLevel="3">
        </lzl-picker-data>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                dataStr:''
            }
        },
        onLoad() {
            this.getListData()
        },
        methods: {
            onOpen() {
                this.$refs.lzlPicker.open()
            },
            getListData(index = 0) {
                const data1 = [
                    {
                        label: '一年级',
                        value: 1001
                    },
                    {
                        label: '二年级',
                        value: 1002
                    },
                    {
                        label: '三年级',
                        value: 1003
                    },
                    {
                        label: '四年级',
                        value: 1004
                    },
                    {
                        label: '五年级',
                        value: 1005
                    }
                ]
                const data2 = [
                    {
                        label: '一班',
                        value: 10011
                    },
                    {
                        label: '二班',
                        value: 10021
                    },
                    {
                        label: '三班',
                        value: 10031
                    },
                    {
                        label: '四班',
                        value: 10041
                    },
                    {
                        label: '五班',
                        value: 10051
                    }
                ]
                const data3 = [
                    {
                        label: '张三',
                        value: 100111
                    },
                    {
                        label: '李四',
                        value: 100211
                    },
                    {
                        label: '王五',
                        value: 100311
                    },
                    {
                        label: '狂飙',
                        value: 100411
                    },
                    {
                        label: '比亚迪',
                        value: 100511
                    },
                    {
                        label: '特斯拉',
                        value: 100611
                    }
                ]
                let data = []
                // 模拟数据请求
                setTimeout(() => {
                    switch(index) {
                        case 0:
                        // 一级数据
                            data = data1
                        break;
                        case 1:
                        // 二级数据
                            data = data2
                        break;
                        case 2:
                        // 三级数据
                            data = data3
                        break;
                    }
                    // 通过setData()方法直接把当前级数据写入
                    this.$refs.lzlPicker.setData(data)
                },500)
            },
            // 选择改变事件
            ({index = 0}) {
                this.getListData(index)
            },
            // 选择结束事件
            ({list = [],value = ''}) {
                this.dataStr = value
                console.log('当前选中的:' + value)
                console.log(list)
            }
        }
    }
</script>

<style>

</style>