精华内容
下载资源
问答
  • 在element中有些组件,你直接加点击事件无效 比如这里这个handle事件不会触发 这时候我们需要加修饰符.native 这样就可以正常点击触发了 如果遇到别的同样的情况,可以首先考虑这个

    在element中有些组件,你直接加点击事件无效
    在这里插入图片描述
    比如这里这个handle事件不会触发
    这时候我们需要加修饰符.native
    在这里插入图片描述
    这样就可以正常点击触发了
    在这里插入图片描述

    在这里插入图片描述
    如果遇到别的同样的情况,可以首先考虑这个

    展开全文
  • 主要介绍了element 中 el-menu 组件的无限极循环,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • 主要介绍了使用element-ui的el-menu导航选中后刷新页面保持当前选中状态,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 关于Element-UI中el-menu,则给其他标签添加点击事件改变 default-active 的值无法使el-menu-item高亮显示的问题 因为这是element中两个不相关联的组件,无法通过组件内的方法去实现这个需求。我采用vuex状态机来...

    关于Element-UI中el-menu,则给其他标签添加点击事件改变 default-active 的值无法使el-menu-item高亮显示的问题

    在这里插入图片描述

    因为这是element中两个不相关联的组件,无法通过组件内的方法去实现这个需求。我采用vuex状态机来实现。
    在这里插入图片描述
    在这里插入图片描述

    为三个导航栏绑定点击事件,点击的时候去改变状态机里的state数据。

    在这里插入图片描述

    在这里插入图片描述

    然后再相应的页面里,调用updated狗子函数,当页面更新的时候,从状态机里从新取出showIndex的值。

    在这里插入图片描述
    在这里插入图片描述

    这时候就发现,点击顶部导航栏的时候,对应的内容区侧边栏导航对应的item也高亮了,实现了这个需求。

    展开全文
  • el-menu-item 菜单导航点击一个选中多个 <el-menu-item index="2"> <i class="el-icon-menu"></i> <span slot="title">导航二</span> </el-menu-item>`` 这种能用index 哪...

    el-menu-item 菜单导航点击一个选中多个

    <el-menu-item index="2">
            <i class="el-icon-menu"></i>
            <span slot="title">导航二</span>
          </el-menu-item>``
    
    这种能用index
    哪种不行 执行了for循环的不行 像下面这 再用index就不行了 发生死板多选
    
    <template v-for="(item, index) in menus">
            <el-menu-item index="index">
                <i class="el-icon-menu"></i>
                <span slot="title">{{item.menuName}}</span>
            </el-menu-item>
        </template>
        
    把这个该死的index换成 :index试试`
    改成
    <template v-for="(item, index) in menus">
            <el-menu-item :index="index">
                <i class="el-icon-menu"></i>
                <span slot="title">{{item.menuName}}</span>
            </el-menu-item>
        </template>
    
    
    
    
    展开全文
  • 原本界面:我出现的点击首页没有跳转,而点击其他的就跳转 原本的代码: 下面展示一些 内联代码片。 <el-menu background-color="#545c64" text-color="#fff" active-text-color="#ffd...el-menu-item index="/

    原本界面:我出现的点击首页没有跳转,而点击其他的就跳转
    在这里插入图片描述

    原本的代码:
    在这里插入图片描述
    下面展示一些 内联代码片

      <el-menu
                        background-color="#545c64"
                        text-color="#fff"
                        active-text-color="#ffd04b"
                >
                    <el-menu-item index="/">
                        <i class="el-icon-s-marketing" style="vertical-align: 0px;"></i> 首页
                    </el-menu-item>
                </el-menu>
                <el-col :span="2">
                    <el-menu
                            :default-active="this.$route.path"
                            router mode="horizontal"
                            class="el-icon-add-location"
                            @open="handleOpen"
                            @close="handleClose"
                            background-color="#545c64"
                            text-color="#fff"
                            active-text-color="#ffd04b">
                        <el-submenu>
                            <el-menu-item index="/admin/index"><i class="el-icon-s-platform"></i>个人中心</el-menu-item>
                            <el-menu-item index="/tsgadmin/index"><i class="el-icon-s-platform"></i>消息中心</el-menu-item>
                            <el-menu-item index="/user/index"><i class="el-icon-s-platform"></i>退出登陆</el-menu-item>
                        </el-submenu>
                    </el-menu>
                </el-col>
    

    解决方法:主要问题是第一个忘记在el-menu没有加入router,正确代码:我这里只截图出错的部分
    在这里插入图片描述
    同时也要注意: ,一定要加上标号index=“1”,否则回会闪动。标号可以1、2…等
    在这里插入图片描述可以参考另一个博文:链接: https://blog.csdn.net/weixin_42565137/article/details/91909055.

    展开全文
  • Vue如何实现el-menuel-tabs联动,通过点击el-menu导航中的选项动态添加tab页面 老规矩,先上效果图! 达成这个效果,首先我们先了解下原理 在el-menu中有一个属性router,开发文档中写的非常清晰,选择该属性后即...
  • index=‘/role’,index的内容必须是跟路由的path一样加上/ :router=‘true’并且:default-active=’$router.currentRoute.path’
  • 上代码 element-ui中关于navMenu的组件主要是这几个(el-menuel-submenu、el-menu-item-group、el-menu-item),用法参考官网的例子。 https://element.eleme.cn/#/zh-CN/component/menu 在我的需求,我没有用到el-...
  • 初学者,刚接触,用到不知道怎么回事刚接触,今天就特意各种粘贴复制示例代码,终于自己试出来了,具体的结构层级关系...class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#
  • Vue el-menu-item路由跳转

    2021-12-13 16:49:24
    Vue el-menu-item路由跳转 1,添加el-menu的default-active属性,值设置为"this.$router.path" ,并加上router。 2,直接将el-menu-item的index设置为路由跳转path 如图:
  • el-menu-item index的使用中出现的问题 <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" mode="vertical" @select="handleSelect" text-color="#000"> <el-menu-item v-for="(item...
  • ::v-deep .el-menu--horizontal > .el-menu-item.is-active{ color: #4283FF; } ::v-deep .el-menu--... ::v-deep .el-menu--horizontal .el-menu-item:not(.is-disabled):hover, .el-menu--horizontal .el-...
  • <p><img alt="" height="31" src="https://img-ask.csdnimg.cn/upload/1618893849268.png" width="317" /></p> 我通过index属性跳转到TwoPage页面的时候可以携带参数吗,可以携带的话我该怎么写呢?...
  • el-menu 导航菜单 item 过多的显示问题

    千次阅读 2021-03-31 17:33:41
    } /deep/ .el-menu--horizontal > .el-menu-item.is-active, /deep/ .el-menu--horizontal > .el-menu-item.is-active:hover { /*高亮后 item 样式 */ background-color: #1b57d6; } /deep/ .el-menu--horizontal >...
  • 修改el-submenu子组件el-menu-item宽度

    千次阅读 2020-09-03 11:03:15
    el-submenu默认样式 修改后样式 修改方法 在css中添加如下代码: .el-menu--collapse .el-menu .el-submenu, .el-menu--popup{ min-width: 120px!important; }
  • 使用element-ui的菜单,在SubMenu Attribute中有一个index的属性,如果index的值从后端传入,则可能出现这个错误。 解决办法: index的值不能有空格,并且要为字符串类型,我上面的错误就是因为jc.eid是一个int型。...
  • el-menu-item内容过多,不能滚动

    千次阅读 2021-05-19 10:05:37
    el-menu-item内容过多,不能滚动 问题描述 这里放了六张图片,只能看到最下面的部分,上面的部分被挤出了屏幕外面。 这里的弹出框是element ui组件自动生成的,即这个div 我此时有关这部分的代码如下 解决思路:...
  • el-menu相关知识记录一、el-menu菜单项高亮设置二、点击菜单项实现路由跳转 2021/11/13 知识点记录 一、el-menu菜单项高亮设置 el-menu高亮是通过:default-active来设置的,一般我们都是绑定$ route.path或者$route....
  • -- </ul>--> <el-menu class="el-menu--popup" :default-active="defaultActive" router> <el-menu-item v-for="(item,index) in routerData" :key="index" :index="item.route" @click.native="flushRouter">{{item...
  • el-dropdown-item @click="effectivenessClick()">VAT有效性查询</el-dropdown-item> 改为 <el-dropdown-item @click.native="effectivenessClick()">VAT有效性查询</el-dropdown-item>
  • el-menu-item hover鼠标移入背景色

    千次阅读 2020-09-16 10:44:06
    像这种鼠标移入背景色很突兀,我想换一种。就要找到这两个类名的hover事件添加一下背景色就ok了 //父级的类名 ....el-menu-item:hover{ background-color:rgb(3,19,33)!important; } 最后效果: ...
  • el-dropdown-item点击事件

    万次阅读 多人点赞 2019-05-22 14:02:36
    但是官方文档中并没有给出el-dropdown-item点击事件。 若直接在el-dropdown-item上添加click事件点击后没有任何反应。若在click后添加native修饰符,则可解决问题。代码如下: <el-dropdown> ...
  • 废话不多说,直接上代码如下: <el-menu class="el-menu-vertical-demo" id="topNav" router background-color='#ededed' text-color='#000000' mode="horizontal" :default-active...
  • 修改element导航栏选中时的背景色,可以通过设置 .el-menu-item.is-active 选择器的样式属性【background-color】使用 !important 使得优先级最大。如下: .el-menu-item.is-active { background-color: #3370ff ...
  • vue中element中,遍历数据显示navmenu,区分menu-item或者el-menu-item
  • 是选中的 ‘1’ 默认选中的 num 至于这个num 就是 你 循环出来的 的数值 <template>...el-menu :default-active="'1'" router mode="horizontal" background-color="white" text-color="#222" ...
  • 记录篇 直接用@click是不生效的 也没有报错 <el-dropdown> <span>...el-dropdown-menu slot="dropdown"> <el-dropdown-item>个人中心</el-dropdown-item> <el-dropd...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,245
精华内容 4,498
关键字:

el-menu-item点击事件