uni底部弹出的多级选择器

呈现效果：

 

 

 

 

 

使用插件：

uni-data-picker 数据驱动的picker选择器

 

插件下载地址：

https://ext.dcloud.net.cn/plugin?id=3796

 

放到对应的目录：

 

 结构代码：

<!-- ↓↓↓↓ 此处使用的插件 ↓↓↓↓ -->
                            <uni-data-picker :localdata="items" popup-title="请选择商品类目" @change="onchange" @nodeclick="onnodeclick"></uni-data-picker>

 

data数组：

// 商品类目数组
                items: [
                    {
                        text: "水果",
                        value: "1-0",
                        children: [
                            {
                               text: "进口水果",
                               value: "1-1",
                               children: [
                                   {
                                       text: "芒果",
                                       value: "1-2",
                                   },
                                   {
                                        text: "山竹",
                                           value: "1-2",
                                   },
                               ]
                            },
                            {
                               text: "本地水果",
                               value: "1-2"
                            }
                        ]
                    },
                    {
                        text: "蔬菜",
                        value: "2-0",
                    },
                    {
                        text: "水产",
                        value: "3-0"
                    },
                ],

到这步刷新就能看到效果了！

methods方法：（不加好像也可以）

onchange(e) {
                const value = e.detail.value
            },
            onnodeclick(node) {
            },

 

  

颜色这些，就要去插件文件uni-data-pickerview.vue里面修改对应的。