在使用element-ui中的多级菜单中遇到的问题

最新推荐文章于 2024-05-16 02:53:35 发布
最新推荐文章于 2024-05-16 02:53:35 发布
阅读量5k 收藏 1
点赞数
分类专栏： element-ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tozeroblog/article/details/84991857
版权
在使用element-ui中的多级菜单中遇到如下问题：

在这里插入图片描述
项目不会报错，只是显示warning，大概的意思是传递prop的类型检测要求是boolean类型，但是传入的是字符串类型。但是这样子看着很别扭，所以就开始找原因
在项目中是这样写的：
在这里插入图片描述

element-ui中的要求：
在这里插入图片描述
这里看的确是写成了boolean类型，但其实vue在解析的过程中是以字符串的形式来进行解析的（之前好像有看过，也正是这样，才突然知道解决方法）
要让其以boolean类型显示，需要通过v-bind动态绑定，解决方法如下：
在这里插入图片描述
这里使用了v-bind的语法糖":"
这样就解决了上面的问题

关于上面为什么不报错且功能能正常显示的猜想：
由于传入的是字符串，而字符串在判断的过程中在boolean类型下为true，所以能正常显示该有的功能

归零-li
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解VUE Element-UI多级菜单动态渲染的组件
10-17
主要介绍了VUE Element-UI多级菜单动态渲染的组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
element动态创建多级菜单
04-14
在这个名为"element动态创建多级菜单"的项目中，开发者利用Element UI来构建了一个可动态生成多级菜单的系统，这在Web应用中非常常见，特别是对于那些需要展示复杂导航结构的网站。 首先，我们来看看如何在Vue中...
vue项目中用elementUI写动态的顶部导航菜单（三级菜单）
热门推荐
a811567770的博客
02-22 1万+
第一次用elementUI写带有下拉的菜单 官方的例子是写死的，不用获取数据，网上找了些例子才整出来 参考链接：https://blog.csdn.net/hailangtuteng/article/details/81164859 ...
vue element-ui NavMenu错位问题
weixin_30786617的博客
07-23 503
原因：子菜单全部打开后太长超过100% 解决方法：设置只能点击打开当前的菜单 转载于:https://www.cnblogs.com/1032473245jing/p/9354550.html
VUE element-ui 之多级下拉菜单（筛选框）_elementui 多层级下拉框(1)
最新发布
2401_84618926的博客
05-16 526
时间筛选
vue使用elementui的el-menu的折叠菜单collapse
weixin_49931650的博客
12-02 1865
由于我的是在el-menu所在组件外面的兄弟组件设置是否折叠的控制，我用事件总线bus进行是否折叠传递。就是如此，有疑问评论区见。
element 三级导航栏（递归方法）
shi19970609的博客
04-08 1069
组件NavMenu <template> <div> <template v-for="item in routerList"> <el-submenu v-if="item.hasOwnProperty('children')&&item.children.length>0" :key="item.path" :index="item.path"> <template slot="ti.
element-ui select 二级联动
a378113472的博客
12-27 3041
在使用select 选择框时，2个select 怎么关联在一起（第一个值发生变化，第二个select值随第一个变化而不同） <el-form :inline="true" :model="filters"> <el-form-item> <el-select v-model="filters.value1" clear...
vue基于element-ui的三级CheckBox复选框功能的实现代码
10-17
最近vue项目需要用到三级CheckBox复选框，需要实现全选反选不确定三种状态。这篇文章主要介绍了vue基于element-ui的三级CheckBox复选框功能的实现方法,需要的朋友可以参考下
vue3使用element-plus搭建后台管理系统---菜单管理
07-01
在本项目中，我们主要探讨的是如何利用Vue3框架与Element-Plus库来构建一个后台管理系统，特别是关于菜单管理的部分。Vue3是Vue.js的最新版本，它带来了许多性能优化和开发体验提升的新特性，如Composition API、...
记录element-ui级联选择器，二级三级列表无法显示的解决办法
qq_45654741的博客
08-12 1587
<!-- 选择商品分类的级联选择框 --> <el-cascader expand-trigger="hover" :options="catelist" :props="cateProps" v-model="selectedCateKeys" @change="handleChange"> </el-cascader>
vue add element-plus 解决menu组件二级菜单失效问题
qq_53959286的博客
11-20 2388
使用vue3.2+element-plus开发的时候踩的坑： 由于我是 通过vue add 指令下载的element-plus，不知道其他方法是否会有这种情况 menu组件正常使用时不会正常显示二级菜单组件问题如下： 这是正常的组件使用：（二级菜单组件） 这里是控制台报的警告：大概意思就是找不到这个组件！ 经过查阅各种相关文档，后来的解决办法竟然是： 把中间的 - 去掉，后面又试了一下竟然可以了 ok此问题解决 vue最新版本的开发与 本地 node版本 、npm版本、vue脚手架版本都有关系
vue-element-admin 三四级路由菜单无法缓存 数据丢失问题 最简单的解决办法
calvinly的博客
08-25 4092
vue-element-admin 开源框架，支持缓存的只能是一、二级路由页面，三级网上就无法缓存了； 看了很多大佬的解决办法文章，尝试了很多，都无法解决办法，折腾了很久，快要放弃的时候，想到一个笨办法，但是却很简单、很有效！！！ 方法核心要点 1、将原本的三级路由页面 定义在一级 或 二级路由位置上； 2、将上述目标路由页面设置为隐藏； 3、在三级路由上定义一个页面，点击后，关闭当前页面，并跳转至目标页面（即1定义的页面）； 贴一下已经实现的代码，仅供参考 路由文件代码： import Layout fr
vue3使用el-menu多级菜单出现点击一个全部展开的问题
m0_46442118的博客
04-07 4694
虽然点击菜单其它的子菜单不会展开了，但是index存的是编号，url存的是路由地址，点击子菜单地址栏显示的是编号信息，不是地址，如图所示。测试时发现单击菜单显示子菜单时其它的菜单也被展开，看了其它文章写的是修改。，发现只有叶子菜单的数据才配置了url,其它级别的则为空数据，所以就导致了配置。注意：后端数据库url和index传的值是唯一的，也不能出现两个空值。:index="menu.url"时出现点击一个全部展开的情况。el-sub-menu中的:index值为menu.index，
vue+elementUI实现多级菜单(五级菜单，六级菜单等等)
m0_55728090的博客
01-24 6085
转载：CSDN博主「春天里的水稻」的原创文章 原文链接：https://blog.csdn.net/qq_32154641/article/details/112463143 本文只是写了四级菜单，想要更多的菜单，你可以仿造那样继续写下去。 效果图如下： 源代码如下： <template> <div class="sidebar"> <el-menu class="sidebar-el-menu" :default-active="onRoutes" :.
element-ui三级菜单栏扩展
weixin_49790897的博客
05-27 2403
案例图： 需求：需要将二级菜单页面拓展到三级菜单 步骤如下： 1.在存放侧边栏json数据文件中，在对应需要进行拓展的菜单增加一个字段名为grandson的对象 2.找到侧边栏组件相对应的.vue文件 修改前： <!-- 菜单 --> <el-menu :default-active="$route.path" class="el-menu-vertical-demo" height="100%" router text-color="#fff.
element的popover弹框中有选择器，点击后popover消失的解决办法
Your_little_cyy的博客
08-29 5833
element的popover弹框中有选择器，点击后popover消失的解决办法
vue-elementUl导航菜单栏折叠和展开会卡顿一秒文字才消失如何处理，菜单折叠动画实现方法
seeeeeeeeeee的博客
07-20 5904
老规矩，先上图看下是不是跟你的问题一样 这就是我的菜单遇到的问题，用的elementul的菜单来做的，但是我这个折叠动画会在最后卡一秒，然后在完全折叠，展开倒是正常的，就是折叠一直有延迟一秒文字消失。让我很头疼。网上看了很多办法，最后我找到了一个很实用的办法。 思路 一开始我是看了网上说让我给:collapse-transition属性改成true。然后一定要记得加样式才行，如下： .el-menu-vertical-demo:not(.el-menu--collapse){ width: 250px
在element-ui实现多级右键菜单
08-24
在 Element UI 中实现多级右键菜单可以通过自定义指令和事件监听来实现。下面是一个简单的示例： 首先，你需要创建一个自定义指令来监听鼠标右键事件，并在触发时显示菜单。可以在 `main.js` 文件中注册该指令： ```javascript import Vue from 'vue' import { Dropdown, DropdownMenu, DropdownItem } from 'element-ui' Vue.directive('contextmenu', { bind: function (el, binding, vnode) { el.addEventListener('contextmenu', function (event) { event.preventDefault() const dropdown = new Vue({ render: h => { return h(Dropdown, { props: { trigger: 'manual' }, on: { command: command => { vnode.context.$emit('command', command) dropdown.$destroy() } } }, [ h(DropdownMenu, null, binding.value.map(item => { return h(DropdownItem, { props: { command: item.command }, domProps: { innerHTML: item.label } }) })) ]) }, mounted() { this.$refs.dropdown.$el.style.position = 'fixed' this.$refs.dropdown.$el.style.left = `${event.clientX}px` this.$refs.dropdown.$el.style.top = `${event.clientY}px` this.$refs.dropdown.show() }, destroyed() { this.$refs.dropdown.hide() } }).$mount() document.body.appendChild(dropdown.$el) }) } }) ``` 然后，在你需要使用右键菜单的组件中，使用 `v-contextmenu` 指令来绑定右键菜单的内容和事件： ```html <template> <div v-contextmenu="contextMenuItems" @command="handleCommand"> Right click me </div> </template> <script> export default { data() { return { contextMenuItems: [ { label: 'Item 1', command: 'item1' }, { label: 'Item 2', command: 'item2' }, { label: 'Submenu', children: [ { label: 'Subitem 1', command: 'subitem1' }, { label: 'Subitem 2', command: 'subitem2' } ] } ] } }, methods: { handleCommand(command) { console.log('Command:', command) } } } </script> ``` 在这个例子中，右键菜单的内容由 `contextMenuItems` 数组定义，每个菜单项包括 `label` 和 `command` 两个属性。当菜单项被点击时，将会触发 `@command` 事件，并将对应的 `command` 参数传递给 `handleCommand` 方法进行处理。 通过这种方式，你可以实现多级的右键菜单。当右键点击目标元素时，菜单会在鼠标位置显示，并且可以处理菜单项的点击事件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值