vue+elementUi 动态导航栏

最新推荐文章于 2024-06-06 10:02:59 发布

还有头发的召召

最新推荐文章于 2024-06-06 10:02:59 发布

阅读量1.2k

点赞数

文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/m0_69528402/article/details/127983171

版权

首先我们先看一下实现的效果

这是我数据库里的菜单数据可以看到是实现设定好的3级菜单

后端我用的就是springboot+mabitis-plus,所做的操作也就是把数据库里的所有菜单查询出来并写到前端；

@RestController
@RequestMapping("/menu")
public class MenuController {
    @Autowired
    private MenuService menuService;
    @RequestMapping("/getMenus")
    public String getDeparts(){
        List<Menu> list = menuService.list();
        System.out.println(JSON.toJSONString(list));
        return JSON.toJSONString(list);
    }
}

前端的处理就是拿到所有菜单数据后对它们进行分级，分为一级，二级，和三级

<script>
    var vm=new Vue({
        el: "#vueDiv",
        data: {
            menu:'',
            one:[],
            two:[],
            three:[],
        },
        mounted() {
            this.getMenus();
        },
        methods:{
            getMenus(){
                axios.post('/menu/getMenus').then(res=>{
                    this.menu=res.data
                    for (let i = 0; i < this.menu.length; i++) {
                        if (this.menu[i].level==1){
                            this.one.push(this.menu[i])
                        }
                        if (this.menu[i].level==2){
                            this.two.push(this.menu[i])
                        }
                        if (this.menu[i].level==3){
                            this.three.push(this.menu[i])
                        }
                    }
                }).catch(function (e){
                    alert(e);
                });
            }
        }
    })
</script>

在html部分我采用的是v-for 和v-if

<div  id="vueDiv" style="height: 100%;" >
        <el-row class="tac">
            <el-col :span="24">
                <h5>导航菜单</h5>
                <el-menu
                        default-active="2"
                        class="el-menu-vertical-demo"
                        @open="handleOpen"
                        @close="handleClose">

                    <el-submenu v-for="(v,i) in one" index="i">
                        <template slot="title">
                            <span>{{v.menuName}}</span>
                        </template>
                        <el-menu-item-group v-for="(v1,i) in two" v-if="v1.parentId==v.id">
                            <template slot="title">{{v1.menuName}}</template>
                            <el-menu-item v-for="(v2,i) in three" v-if="v1.id==v2.parentId">{{v2.menuName}}</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>

                </el-menu>
            </el-col>
        </el-row>
</div>