vue+elementUI实现动态渲染二级导航菜单列表
直接进入正题
首先看数据的格式(写个死数据来演示):
-
data() {
-
return {
-
menulist: [
-
{
-
id: 101,
-
navName: "商品管理",
-
children: [
-
{
-
id: 11,
-
navName: "商品一",
-
},
-
],
-
},
-
{
-
id: 102,
-
navName: "用户管理",
-
children: [
-
{
-
id: 22,
-
navName: "用户一",
-
},
-
{
-
id: 33,
-
navName: "用户二",
-
},
-
],
-
},
-
{
-
id: 103,
-
navName: "个人中心",
-
children: [
-
{
-
id: 44,
-
navName: "个人1",
-
},
-
{
-
id: 55,
-
navName: "中心2",
-
},
-
{
-
id: 66,
-
navName: "个人中心3",
-
},
-
],
-
},
-
],
-
};
-
},
如果是原始的elementUI复制过来长这个样子:
-
<el-menu background-color="#545c64" text-color="#fff">
-
<el-submenu index="1">
-
<template slot="title">
-
<span>菜单一级</span>
-
</template>
-
<el-menu-item-group>
-
<el-menu-item index="1-1">
-
<span>菜单二级1</span>
-
</el-menu-item>
-
<el-menu-item index="1-2">
-
<span>菜单二级2</span>
-
</el-menu-item>
-
</el-menu-item-group>
-
</el-submenu>
-
</el-menu>
效果如下图:
但是以上的固定数据的方式只能解决一部分问题,在实际应用开发中,大多数都是调用后端接口,使用传过来的导航菜单数据来动态渲染显示在页面上,动态渲染二级导航菜单,我们会使用到v-for和插值语法,代码如下:
-
<el-menu background-color="#545c64" text-color="#fff">
-
<el-submenu :index="item.id ''" v-for="item in menulist" :key="item.id">
-
<template slot="title">
-
<span>{{ item.navName }}</span>
-
</template>
-
<el-menu-item-group>
-
<el-menu-item
-
:index="subItem.id ''"
-
v-for="subItem in item.children"
-
:key="subItem.id"
-
>
-
<span>{{ subItem.navName }}</span>
-
</el-menu-item>
-
</el-menu-item-group>
-
</el-submenu>
-
</el-menu>
效果如下图:
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhfjikfe
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13