侧边栏开发--通过v-for循环渲染列表

最新推荐文章于 2023-10-04 21:52:02 发布
最新推荐文章于 2023-10-04 21:52:02 发布
阅读量186 收藏
点赞数 1
文章标签： vue.js javascript ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wssg1206/article/details/132779838
版权

首先，通过观察menuList中的数据，我们可以分析出第一层用来渲染一级菜单，第二层的children用于渲染二级菜单

所以在一级菜单的el-submenu中，我们可以添加v-for循环：

在menuList中循环列出item，以item.id为索引值

在二级菜单中的el-menu-item中，我们可以新建一个v-for循环：

因为我们已经去到了item，且children就在item列表中

又因为每一个菜单都要有自己唯一的index，所以我们通过item.id作为每个数组的唯一index值

又因为:index中只接受字符串，所以我们需要在item.id后面加上一个空字符串‘’，则满足语法要求。

最后的展示结果如下：

wssg1206
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
el-submenu中使用v-for后绑定:index报错
weixin_43837268的博客
06-16 2873
1.报错原因： :index中只接受字符串 2.解决思路： 把字符串转化成数字 3.代码 <el-submenu v-for="(item,index) in menulist" :key="item.id" :index="index + ''"> </el-submenu> ...
element-ui的navMenu使用v-for循环渲染不同子标签(el-menu-item和el-submenu)
热门推荐
郑伟斌的博客
03-13 1万+
简单记录1.简介2.上代码功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 1.简介 作为一个合格的全栈开发者，前端的常...
关于element ui NavMenu 导航菜单 的循环遍历
like245660的博客
12-01 3933
<template> <el-menu class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#545c64" style="width:12vw" text-color="#fff" active-text-color="#ffd04b"> <h3...
vue中使用elementui中的NavMenu使用v-for循环实现
荔枝吖阿
05-09 6833
之前就是直接按照官网https://element.eleme.io/#/zh-CN/component/menu案例来写，显的代码十分的冗杂， 就想这直接循环实现，不用引用多个el-menu-item,如图： 主要思路是，运用了components动态组件（https://cn.vuejs.org/v2/guide/components-dynamic-async.html）来根据是否有二级菜单来判断，如果有改动态组件就使用is切换成el-submenu，否则切换成el-menu-item，核心代
v-for 循环element-ui菜单
weixin_30260399的博客
04-08 1621
vue使用了element-ui的菜单组件, 这个组件的el-menu-item项上,有一个属性index,值是字符串类型, 在使用v-for的index时,它是一个数值型,所以如果直接写index,运行后,会在浏览器的控制台中报错误,虽然不影响运行, 修改成如下就不报错了 <!-- :index 要是字符串类型,而for中的index是数值,如果直接写会报错,但不影响运行....
iOS开发-iPad侧边栏Tab选项卡切换
02-20
Android中习惯了叫侧边栏，iOS中如果不习惯侧边栏称呼的话可以叫dock，侧边栏的切换，类似于Android中的底部导航栏的切换，iPad尺寸大了一些，导航的栏目放在侧边会显示的更好耐看一些。选项卡是用按钮实现的，通过...
react-reactsidebarReact的一个侧边栏组件
08-15
react-sidebar - React的一个侧边栏组件
react-reactburgermenu一个侧边栏组件
08-15
react-burger-menu - 一个侧边栏组件拥有一个效果集合使用CSS样式和SVG路径动画的转换{"JavaScript":109930,"CSS":3816,"HTML":494}
在Home Assistant中隐藏页眉和侧边栏抽屉-JavaScript开发
05-26
在Home Assistant的信息亭模式下隐藏标题和侧边栏抽屉在Home Assistant的安装中隐藏标题和侧边栏抽屉如果以前使用过自定义标题，则需要从HACS卸载它，并在HACS搜索Kiosk模式下进行安装。 使用UI或configuration.yaml...
el-menu 导航栏学习-for循环封装
最新发布
wgq2020的博客
10-04 734
需要注意的是，使用 for 循环封装 el-menu 时，我们需要使用 标签来包裹循环生成的 el-menu-item。这是因为 el-menu 只支持 el-menu-item 作为直接子节点。在模板中，我们使用 v-for 循环遍历菜单项数组，并使用 :index 绑定菜单项的链接地址。在 el-menu-item 组件中，我们显示了菜单项的名称。通过 for 循环封装 el-menu，可以方便地根据数据动态生成菜单项。这样，我们就可以动态生成 el-menu 组件，根据菜单项数组自动生成菜单项。
el-menu 导航栏学习-for循环封装（2）
u011269801的专栏
09-27 812
{ name: "/test1", navItem: "导航一" },{ name: "/test2", navItem: "导航二" },{ name: "/test3", navItem: "导航三" },基于el-menu 导航栏学习（1）
el-menu写菜单栏
m0_59011179的博客
03-06 1887
vue+el-menu
v-for 实现导航栏的路由跳转
W_mizi的博客
03-26 1531
导航栏的路由跳转 想要实现的效果，点击某个列表时，页面、会自动跳转到那个页面。 最开始构建页面时，使用的是7个li，先将页面布局写好。 实现的办法是： 使用v-for，循环li，点击的时候动态获取各自的跳转路由 <ul role="menubar" class="el-menu--horizontal el-menu" :class="$style.d_el_men...
vue项目中使用Element-ui时侧边栏的循环嵌套与高亮
weixin_51527055的博客
12-21 711
<el-menu :router="true" //必须加 :default-active="this.$route.path" //监听路由显示高亮 :unique-opened="true" ref="menu" > ...
[学习笔记]VUE项目中令elementUI中的el-menu动态自适应数据
weixin_42966151的博客
11-29 2023
[学习笔记]elementUI中el-menu动态自适应数据
左侧菜单栏的渲染（v-for）
qq_45780380的博客
03-26 511
左侧菜单栏的渲染（v-for） 代码： <el-aside width="200px"> <el-menu background-color="#333744" text-color="#fff" active-text-color="#ffd04b"> <!-- 一级菜单--> <el-submenu :index
elementUI循环动态生成表格内容
qq_40390762的博客
07-01 1447
记录
vue实战精华(四)——ElenemtUI中菜单的双重for循环渲染
qq_40556950的博客
04-15 1070
1.需求 后台管理系统左侧部分的菜单，从后台获取数据再渲染到页面结构上。 2.代码 这个写法有两种，第一种写法是： <el-menu> <el-submenu :index="item.id + '' " v-for="(item,index) in menuList" :key="index"> <!--这个index属性只接收字符串...
Vue 循环添加菜单和子菜单
晚秋的专栏
05-13 1356
<template> <div class="mainHeader"> <div class="logo"> <img src="@/assets/img/headerlogo.png" /> <p>{{titlename}}</p> </div> <el-menu :default-active="activeIndex2" class=.
vue keep-alive 侧边栏不重新渲染
09-07
Vue中的keep-alive组件可以用于缓存已经渲染过的组件，从而提升页面性能和用户体验。它可以在组件被切换时将其...综上所述，通过使用keep-alive组件，我们可以实现侧边栏不重新渲染的效果，提升页面的性能和用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值