element-ui+vue 3级导航菜单动态渲染
直接上代码// vue文件<template><!-- el-menu:菜单栏的根组件 router: 设置路由可以跳转 --><el-menu:router="true":unique-opened="true"class="mymenu el-menu-vertical-demo"><!--...
·
直接上代码
// vue文件
<template>
<!-- el-menu:菜单栏的根组件 router: 设置路由可以跳转 -->
<el-menu
:router="true"
:unique-opened="true"
class="mymenu el-menu-vertical-demo"
>
<!-- submenu:菜单栏中的一项 index: 它的标识(唯一)-->
<el-submenu
v-for="(item, index) in menusList"
:key="index"
:index="item.id.toString()"
>
<!-- 这一项的图标&文字信息 -->
<template slot="title">
<i class="el-icon-location"></i>
<span>{{ item.title }}</span>
</template>
<!-- 判断是否最后一级子元素 -->
<template v-for="(item1, index1) in item.chirdren">
<!-- 如果不是最后一级 -->
<template v-if="item1.chirdren !== null">
<el-submenu :key="index1" :index="item1.name">
<template slot="title">
<i class="el-icon-location"></i>
<span>{{ item1.title }}</span>
</template>
<el-menu-item
v-for="(item2, index2) in item1.chirdren"
:key="index2"
:index="'/' + item2.name"
>
<i class="el-icon-s-grid"></i>
<span>{{ item2.title }}</span>
</el-menu-item>
</el-submenu>
</template>
<!-- // -->
<!-- 如果是最后一级 -->
<template v-else>
<el-menu-item :key="index1" :index="'/' + item1.name">
<i class="el-icon-s-grid"></i>
<span>{{ item1.title }}</span>
</el-menu-item>
</template>
<!-- // -->
</template>
</el-submenu>
</el-menu>
</template>
<script>
export default {
data() {
return {
menusList: menu
};
}
};
</script>
<style></style>
因为v-for和v-if不能一起使用,eslint会报错,查阅官方文档后,将v-for放到template标签里,即可解决
4级以上菜单不推荐使用此方法,可以用组件递归逻辑。
// 数据结构
"menu": [
{
"id": 1,
"parent_id": 0,
"type": 1,
"title": "设备管理",
"name": "admin/device/index",
"chirdren": [
{
"id": 2,
"parent_id": 1,
"type": 2,
"title": "设备管理【管理员】",
"name": "admin/device/index",
"son": [
{
"id": 4,
"parent_id": 2,
"type": 3,
"title": "设备列表",
"name": "admin/device/index",
"chirdren": null
}
}
}
更多推荐
已为社区贡献2条内容
所有评论(0)