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

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

• 前端框架：VUE

• UI框架：Element UI

• 背景：课程设计二手市场分类需求

先放效果图：

效果图.gif

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

                <el-popover v-for="item in catalogs"
                    placement="top-start"
                    width="200"
                    trigger="hover"
                    style="padding: 25px">
                    <div v-for="opt in item[1]"  class="text item">
                        {{ opt }}                    </div>
                    <el-tag slot="reference" style="background-color: white;color:#ff5555;border:1px solid">{{item[0]}}</el-tag>
                </el-popover>

Script中数组定义的代码：

<script>
    export default{
        data(){            return{                catalogs:[
                    [                        '闲置数码',
                        [                            '手机','iphone','text'
                        ]
                    ],
                    [                        '家居日用',
                        ['电风扇','拖把']
                    ],
                    [                        '鞋服配饰',
                        ['女装','男装','童装','配饰']
                    ],
                    [                        '书本文具',
                        ['文学','科技']
                    ],
                    [                        '食品零食',
                        ['饮品','零食']
                    ],
                    [                        '线下交易',
                        ['同城','异地']
                    ]
                ]
            }
        }
    }</script>

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

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

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

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

当然每个标签里面也可以添加link之类的其他标签，实现更丰富的元素。

作者：热心网友小盒盒
链接：https://www.jianshu.com/p/0a18f24643cf