VUE二维数组+Popover弹出框实现嵌套分类列表

VUE二维数组+Popover弹出框实现嵌套分类列表

• 前端框架：VUE
• UI框架：Element UI
• 背景：课程设计二手市场分类需求

先放效果图：

效果图.gif

想实现像闲鱼那样的嵌套分类列表，在ElementUI的Popover弹出框发现了一个合适的组件。于是开始动手。使用ElementUI中的TAG标签作为分类标签的展示。课设负责老师规定不允许在代码中写注释，以此记录一下。

                
                    

                        {{ opt }}
                    
                    {{item[0]}}
                

Script中数组定义的代码：

vue中标签的for循环真是太好用了哈哈哈哈哈哈，首先我对popover弹出框做了一层循环，实现了我要分的六个大类。第一个v-for="item in catalogs"执行完成后每个item中的内容为一个数组。

                    [
                        '闲置数码',
                        [
                            '手机','iphone','text'
                        ]
                    ]...

每个popover中的TAG标签文字都改为{{item[0]}}，也就是数组的第一个元素。这样就实现了6个TAG的展示。

内层的嵌套列表实现就要依赖item[1]这个数组，第二个for循环针对这个数组实现每个弹出框里的展示内容。

当然每个标签里面也可以添加link之类的其他标签，实现更丰富的元素。源码大概会在我课设写完之后放在github。