去掉el-sub-menu中的下拉箭头

最新推荐文章于 2024-01-03 11:16:44 发布
最新推荐文章于 2024-01-03 11:16:44 发布
阅读量2.6k 收藏 2
点赞数
文章标签： 前端 css vue elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51737922/article/details/129794838
版权

发现的问题：
在这里插入图片描述
由于上方的“管理系统处”是标题处，所以并不需要后方的下拉箭头的显示
解决步骤：
1、通过浏览器中的调试元素，找到了该下拉箭头位置的css样式，所以需要将该样式隐藏；
在这里插入图片描述
2、由于该样式来自于element-plus组件，所以要修改该样式的话需要使用到css中的样式穿透“/deep/“ 。同时，我们的目的只是删除掉最上方的下拉箭头而不是全局的，所以我们需要通过css中的选择器方式来选中。
在这里插入图片描述
问题解决：
在这里插入图片描述

小白Onion
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
Vue3 封装 Element Plus Menu 无限级菜单组件【建议收藏】
youyacoder的博客
09-16 6204
使用 element-plusel-menu组件实现菜单，主要包括三个组件：el-menu：整个菜单；：含有子菜单的菜单项；：没有子菜单的菜单项（最末级）；结合菜单的属性和展示效果，可以得到每个菜单项包括：菜单名称、菜单图标、菜单唯一标识、子菜单列表四个属性。/*** 菜单项/*** 菜单名称/*** 菜单编码（对应 el-menu-item / el-sub-menu 组件的唯一标识 index 字段）/*** 菜单的图标*/ icon?: string;/**
element 中 el-menu 组件的无限极循环思路代码详解
10-15
主要介绍了element 中 el-menu 组件的无限极循环,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
更改element ui中下拉菜单的小箭头的样式
qq_35779070的博客
06-14 1万+
更改element ui中下拉菜单的小箭头的样式 添加样式：【注意添加样式style中不能添加scoped】 .drop.el-popper[x-placement^=bottom] .popper__arrow { border-bottom-color: #1EBEF4 !important; left: 50% !important; } 更改下方箭头位置： ...
关于layui导航栏不展示下拉列表的解决方法
10-16
今天小编就为大家分享一篇关于layui导航栏不展示下拉列表的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
elementUI 修改导航菜单源码NavMenu
weixin_40466351的博客
11-03 1758
elementUI 修改导航菜单源码NavMenu
element-plus中menu的基本知识点
m0_52518047的博客
11-24 6175
（1）menu组件要有路由导航效果； （2）在页面刷新的时候，选中的导航要保持展开以及高亮状态；
论el-menu自定义样式
最新发布
song_song0927的博客
01-03 789
el-menu自定义样式,修改第三方组件的样式
el-sub-menu二级菜单
qq_55928824的博客
09-25 1446
el-sub-menu
element-ui菜单el-menu的使用
热门推荐
m0_63040701的博客
05-28 1万+
el-menu详解。
el-menu写菜单栏
m0_59011179的博客
03-06 1868
vue+el-menu
去除el-submenu下拉箭头
HongHamster的博客
11-06 2933
需求：点击头像下拉选项，但不需要下拉箭头
el-date-picker 英文改中文.doc
11-18
https://blog.csdn.net/xuelang532777032/article/details/121287203,内有博客截图，方便没有vip的小伙伴下载
el-select-tree:ElementUI的el-select与el-tree结合
05-07
ElementUI的el-select与el-tree结合在一起。 在线示例 用法 安装 npm install --save el-select-tree 需要element-ui 如果您的项目不使用element-ui，则需要引入一个单独的element-ui包，如下所示： import 'el-...
vue2+el-menu实现路由跳转及当前项的设置方法实例
08-28
主要介绍了vue2+el-menu实现路由跳转及当前项的设置,方法实例代码详解，非常不错，具有参考借鉴价值，需要的朋友可以参考下
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
10-16
主要介绍了使用element-ui的el-menu导航选中后刷新页面保持当前选中状态，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
elment-ui 导航菜单样式的修改（一）——一级菜单系列-单行
weixin_44867717的博客
09-17 3292
elment-ui 导航菜单样式的修改（一）——一级菜单系列-单行 一级菜单系列-单行 页面及接口数据写法 <div class="top-b"></div> <div class="left"> <!-- :default-openeds="dactive" --> <el-menu class="el-menu-vertical-demo" :unique-opened="tr
element UI NavMenu 导航菜单样式修改
qq_43503450的博客
09-16 2206
element UI NavMenu 导航菜单样式修改
el-menu箭头改为右下
MFWSCQ的博客
08-03 1276
el-menu箭头改为右下
去掉el-sub-menu中的特定下拉箭头
weixin_73594971的博客
11-11 604
我是一名大二的计科女大学生，希望大家相互沟通交流，学习进步哦o(*￣▽￣*)ブ~
el-sub-menu 默认展开
04-28
el-sub-menu是Element UI框架中的一个组件，用于在侧边栏中展示子菜单。 el-sub-menu默认是闭合状态，在点击父级菜单时才会展开显示子菜单。但是如果需要el-sub-menu默认展开，可以通过设置default-active属性来实现。 在default-active属性中，可以指定一个子菜单的index值，这个子菜单在页面加载时就会自动展开。例如： ``` <el-menu> <el-sub-menu default-active="1"> <template slot="title">菜单一</template> <el-menu-item index="1">选项1</el-menu-item> <el-menu-item index="2">选项2</el-menu-item> <el-menu-item index="3">选项3</el-menu-item> </el-sub-menu> </el-menu> ``` 在上面的代码中，el-sub-menu组件的default-active属性被设置为"1"，表示菜单一的第一个子菜单默认展开。页面加载时，菜单一的选项1会自动展示。 需要注意的是，如果一个el-menu中有多个el-sub-menu，默认展开多个子菜单可能会让页面看起来比较杂乱。因此，只有在必要的情况下才应该使用default-active属性默认展开子菜单。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值