vue+element el-menu递归多层菜单$emit事件失效

父组件

 <!-- 左边菜单 --><left-menu @handleLeftMenu='handleLeftMenu' :menuList='menuList' />

import LeftMenu from '@/components/leftMenu'data() {return {currentComponent: 'Dic',menuList: [{text: '平台配置',icon: 'el-icon-location',children: [{text: '系统代码表',href: '/console/dic',children: [{text: '系统代码表2',href: '/console/consumer'}]},{text: '用户管理',href: '/console/consumer'},{text: '白名单管理',href: '/console/whiteList'},{text: '角色管理',href: '/console/role'},{text: '菜单管理',href: '/console/menu'},{text: '通知公告',href: '/console/administratorsNotice'},{text: 'IP访问控制',href: '/console/ipAccessControl'},{text: '分局管理',href: '/console/branchManagement'},{text: '软件开发商管理',href: '/console/softwareDevManagement'},{text: '软件开发商用户管理',href: '/console/userManagementSoftwarDev'},{text: '业主信息管理',href: '/console/ownerInfo'}]},{text: '安全审计',icon: 'el-icon-message',children: [{text: '登录日志',href: '/console/loginLog'},{text: '操作日志',href: '/console/operationLog'}]}]}},

子组件中注意加上v-bind="attrs"v−on="attrs" v-on="attrs"v−on="listeners"可以解决问题

    <el-menu :default-active="'0'" ref="menus" mode="vertical"><template v-for="(item, index) in menuList"><el-submenu class="menu-group" :index="item.href + '_' + index" :key="item + '_' + index" v-if="item.children"><template slot="title"><i :class="item.icon && item.icon"></i><span>{{item.text}}</span></template><left-menu :menuList="item.children" v-bind="$attrs" v-on="$listeners"></left-menu></el-submenu><el-menu-item default-active="0" :key="item.href" v-else :index="index + ''" @click="selectItem(item, index)"><i :class="item.icon && item.icon"></i><span slot="title">{{item.text}}</span></el-menu-item></template></el-menu>

    methods: {selectItem(item, index) {console.log('selectItem', item.href, item.href + index)//handleLeftMenuthis.$emit('handleLeftMenu', { ...item, index })},}

vue+element el-menu递归多层菜单$emit事件失效相关推荐

vue 移动端在div上绑定click事件失效
在.vue的文件中使用了better-scroll,在div标签上绑定click事件后,无效. 原因:使用了better-scroll,默认它会阻止touch事件.所以在配置中需要加上click: t ...
【VUE 表单验证】vue Element 表单验证中多层v-for验证方法
vue Element 表单验证中对象有list列表如何验证正常情况下只需要<el-form-item> 标签中填入prop数据属性即可. <el-form-item label ...
element ui 图片控件排序_JAVA全栈面试前端基础之四 Vue+Element框架快速开发
本文主要包括以下4个内容什么是ElementUI Vue 中引入ElementUI Vue+elementUI构建后台管理系统开源项目推荐 1.什么是ElementUI 官网:https://el ...
html 左侧树形菜单,vue左侧菜单,树形图递归实现代码
学习vue有一段时间了,最近使用vue做了一套后台管理系统,左侧菜单需求是这样的,可以多层,数据由后台传递.也因为自己对官方文档的不熟悉使得自己踩了不少坑,今天写出来和大家一起分享. 效果图如下所示: ...
vue+element 后台管理系统（三）树形图
<!DOCTYPE html> <html class="over_hidd"> <head><meta charset="UT ...
vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
Vue + Element UI——监听DOM元素高度和宽度解决方案整理（八种方法）
问题描述监听DOM元素大小的变化,在前端开发中,算是一个比较常见的需求,比如我们要制作可伸缩的图表的时候,可能需要根据DOM大小的变化,进行动态的更新图表. 解决方案方法一: 监听window变化 ...
vue+element+echarts柱状图+列表
前端由vue+element搭建框架,引入vue和element的index.js和css就可以写页面: 页面和js可以echarts官网实例看下都是有的,主要看下如何动态赋值: 柱状图和列表: &l ...
042——VUE中组件之子组件使用$on与$emit事件触发父组件实现购物车功能
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...

vue+element el-menu递归多层菜单$emit事件失效

vue+element el-menu递归多层菜单$emit事件失效相关推荐

最新文章

热门文章