使用v-for 指令循环渲染 menuData 数组中的每个菜单项。 如果菜单项有子菜单(children 属性存在且长度大于 0),则使用 el-sub-menu 组件进行渲染,并通过 #title 插槽显示菜单标题。 如果菜单项没有子菜单,则使用 el-menu-item 组件进行渲染。 脚本部分: 使用ref 定义响应式数据 menuData,包含菜单项的数据结构。
对于导航栏主菜单NavMenuDemo.vue进行for循环改进,代码如下所示: <template> <el-container> <el-aside width="200px"> <el-menu :default-active="this.$route.path" class="el-menu-demo" router @select="handleSelect" > <el-menu-item v-for="(item, i) in navList" :key="i" :index="item...
el-menu-item 就是普通的菜单项 el-submenu 是菜单项里还有子菜单 el-menu-item-group 是菜单项组,就是好几个菜单项有个标题 网络异常,图片无法展示 | index的妙用 建议将每个el-menu-item和el-submenu上加上index的属性。 好处以下: 选中的时候,有高亮的状态 方便设置默认选中的菜单,可以default-active=...
<el-menuclass="aside-menu"router :default-active="$route.path":collapse="isCollapse"background-color="#131b27"text-color="#bfcbd9"active-text-color="#20a0ff":default-active="$route.path":当前激活菜单的index,栏目与path做了匹配就拿到了path然后激活对应的item,当前打开了哪个页面,那么就会去找i...
el-menu-item遍历后台传回的数据时，设置:index="item.name" 会报错如下：解决办法：index的值不能有空格，并且是字符串类型，我上面是自己接受到数据遍历添加的一个下标，把他转为字符串就不会报错了
1、数据绑定问题：在使用v-for指令循环渲染多个el-menu-item时，没有正确地使用冒号（：）来绑定数据。正确地使用了v-bind指令或者简写的冒号（：）来绑定数据。2、数据问题：菜单项的索引值没有正确设置，或者在渲染菜单项时出现了错误。检查数据源和渲染逻辑，确保每个菜单项都有一个唯一的索引值。3...
{ item.name }}</span> </el-menu-item> </template> </div> </template> <script> export default { name: "myitem", props: { data: { type: Array, default: [], }, }, // 注意: 在template标签上使用v-for,:key="index"不能写在template标签上,因为其标签不会被渲染,会引起循环错误 }...
上网百度以及结合提示,可以得出结论: <el-menu-item></el-menu-item>中的index属性,接受的值必须为字符串或null,而我在使用该组件时是用v-for=“(item, index) of xxx”遍历,传入的参数时是index,为数字,不满足条件,故给出警告 所以调用toString()方法就好啦...
<!-- 递归动态菜单 --><myitem:data="menuArr"></myitem></el-menu> js部分 importmyitemfrom"./components/myitem.vue";// 引入递归菜单组件exportdefault{name:"Home",components: { myitem,// 注册一下},data() {return{activeIndex:this.$route.path,menuArr: [...]// 数据是上述我们模拟的数...
会基于这个路由生成一个概要,生成一个概要的item。这里会去做一个判断,如果只有一个children的情况下,children的legnth为1的情况下,那么其实就是一个item。 如果children的长度大于1的情况下,那么其实就是sub menu,里面才是一个一个的item,这些item从子路由里面来。这里其实就是for循环将里面的item通过循环从子的路...