element-ui导航选中节点父级高亮问题

最新推荐文章于 2023-06-20 17:55:19 发布
最新推荐文章于 2023-06-20 17:55:19 发布
阅读量3.4k 收藏 9
点赞数 1
分类专栏： css 文章标签： css element-ui 导航 高亮
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cage7181/article/details/102522079
版权

element-ui的导航菜单组件在选中节点后，只有选中节点会高亮，父级并不会高亮。

这在项目层级深或者是菜单收起后无法直观的看到选中项，体验并不是很好！

但是可以通过修改element-ui的css文件进行修改！

具体修改：

       1、所要修改的文件："element-ui/lib/theme-chalk/index.css";

       2、在文件中找到.el-submenu__title{border-bottom-color:#409EFF}这句css。

       3、加入color:#409EFF !important;注：一定要加important，不然不会生效！

最后实现效果：

 

Cage0315
关注
专栏目录
vue el-tree 默认展开第一个节点的实现代码
10-15
9. 实际效果与应用：上述代码和方法的实现可以让开发者在使用Vue.js和Element UI开发项目时，快速实现el-tree组件默认展开第一层的第一个节点的功能。 总结：本文通过实例代码详细介绍了在Vue.js框架中，如何结合...
vue element-ui中选择子菜单时父菜单高亮
m0_51371710的博客
04-22 1122
发现页面载入时和刷新页面时能高亮显示了，但选择子菜单时父菜单无高亮。不知道有没有小伙伴分享自己的解决方案，一起进步。但发现页面载入时和刷新页面时高亮显示消失。这时候想到用计算属性来解决办法。最近想要这样一种效果。
element侧边导航高级技巧：子菜单高亮如何让父菜单也高亮
Shids_的博客
08-10 4158
element侧边导航高级技巧：子菜单高亮如何让父菜单也高亮
element的 menu样式修改包含hover
m0_49014616的博客
09-03 1万+
element的 menu样式修改包含hover 1.修改主菜单的背景色等，直接再标签上写所需背景色，比如： 2.修改子菜单的背景色 .el-menu-item { background-color: #333 !important; } 3.鼠标悬浮时，子菜单的样式： .el-menu-item:hover{ outline: 0 !important; color: #409EFF !important; } .el-menu-item.is-active {
elementPlus (pure admin)子菜单选中同时父级选中
qq_43371595的博客
10-25 769
elementPlus（pure admin） 子菜单选中同时激活父级
element导航栏修改悬停及选中样式
热门推荐
weixin_48111439的博客
11-27 1万+
Element -导航栏修改悬停及选中样式 element导航栏修改悬停及选中样式 **修改导航栏样式时el-menu-item和el-submenu有区别 el-menu-item在scoped中设置值是可以的，而el-submenu在scoped中设置值不起作用 原效果 el-menu-item部分 <style lang="less" scoped> .el-menu-demo { height: 92px; font-weight: bold; } //设置了行高和字体大小、高
el-tree 实现点击子节点父节点也高亮
qq_36406553的博客
06-20 1017
【代码】el-tree 实现点击子节点父节点也高亮。
详解关于element级联选择器数据回显问题
10-17
在前端开发中，Element UI 是一个非常流行的组件库，提供了丰富的 UI 组件，极大地提高了开发效率。其中，级联选择器（Cascader）是一种常用的选择组件，用于处理层次结构的数据，例如地区、部门等。然而，在实际...
Vue+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）
10-14
在这个组件中，`<el-tree>`是Element UI提供的树形控件，`data`属性接收树形结构数据，`node-key`用于唯一标识每个节点，`size`控制节点的大小，`highlight-current`高亮当前选中节点，`check-on-click-node`则在...
Element中Tree树结构组件中实现Ctrl和Shift多选.doc
07-10
如果用户按下了 Ctrl 键，那么我们就将当前节点添加到选中数组中，如果节点已经在选中数组中，那么我们就将其从选中数组中删除。如果用户按下了 Shift 键，那么我们就将当前节点添加到选中数组中，并且将当前节点...
element tree
10-27
在本项目中，我们将关注如何使用Vue和Element UI来实现一个具有搜索、增删改以及节点上下移动功能的树形结构（Tree）组件。 首先，让我们深入理解“Tree”组件在前端开发中的作用。树形结构是一种数据表示形式，常...
Vue el-menu高亮设置及点击菜单项实现路由跳转
爱哭的毛毛虫的博客
11-13 1万+
el-menu相关知识记录一、el-menu菜单项高亮设置二、点击菜单项实现路由跳转 2021/11/13 知识点记录 一、el-menu菜单项高亮设置 el-menu高亮是通过:default-active来设置的，一般我们都是绑定$ route.path或者$route.name这两个值，因为他们基本上都是唯一的，对于高亮的判断这是通过将:default-active绑定的值与菜单项的唯一标识index比较来显示是否高亮，如果相同则高亮。 $ route.path对应当前页面路由的路径。 $ route
elementUI，el-menu菜单栏高亮
m0_69839414的博客
02-09 344
选择和页面刷新后当前页高亮(而不是回到特定页面)
Element UI 菜单高亮设置
qq_40678503的博客
10-22 2766
其实这个功能在element ui官方文档中有写 其实主要是这两个属性 <el-menu :default-active="$route.path" router> <el-submenu index="1"> <template slot="title"> <span>菜单栏</span
el-tree只能点击最后⼀级
TodayStartWJH的博客
10-17 2516
el-tree只能点击最后⼀级
vue + element 左侧导航栏选中子级，父级高亮问题了
shumabaobei1214的博客
09-07 3843
在element 当中，我们选中了子级（二级菜单），有高亮，但是对应的父级（一级菜单）没有任何选中状态。如图 但是在项目中，一般情况都会让对应的父级也呈现高亮的状态。如图，人员管理为一级菜单 =》人员档案为二级菜单 （为了效果明显，给的比较显眼的背景色），第一个图是展开的样式。第二个是收缩起来的样式（职位管理深灰色，是触摸上去的样式） 其实在element钟，功能都是有的，选中会有个类名，只是没有给他添加样式，只需要在你写导航栏页面给他添加以下样式就可以了。 //对应子级，...
el-menu父节点 父父节点高亮的css
jian436的专栏
06-10 472
同时可解决所有同一级的el-submenu__title颜色修改。
Elment ui treeselect 实现一级可选子级不可选，父级不可选子级可选
ddsuuny的博客
03-01 2661
1.父级可选，子级不可选 <treeselect v-model="form.preCode" :options="preCodeOptions" :normalizer="normalizer" :show-count="true" placeholder="选择前置工序" /> /**..
el-tree技巧之只能选中最后一层级的子节点以及查找树结构第一个无子节点的叶节点
yinzisang的博客
12-30 7585
设置el-tree层级线，并且只能选中无子节点的叶节点
el-tree-select选择子级 让父级也高亮
最新发布
06-22
`el-tree-select`是Element UI库中的一个组件，它是一个基于树形结构的选择器，常用于展示层级关系的数据。要实现子级选中时父级自动高亮，通常需要配合组件的API和自定义事件来操作。以下是一个简化的步骤： 1. 首先，确保你的`el-tree-select`组件已经绑定了`props`或`data`属性，其中包含了树形结构的数据。 2. 给每个节点添加一个`key`属性，用于唯一标识节点。这对于跟踪父子关系很重要。 3. 当用户在子级选择节点时，触发一个自定义事件，比如`node-click`，在这个事件处理函数中，查找当前选中的子节点的父节点，并更新其状态。你可以使用`this.$refs.treeRef`来引用树组件实例，然后调用其提供的方法（如`getNodeByPath`）来找到父节点。 ```javascript <template> <el-tree ref="treeRef" :data="treeData" :props="defaultProps" @node-click="handleNodeClick" ></el-tree> </template> <script> export default { methods: { handleNodeClick(node) { if (node.parent) { // 获取父节点并更新其状态，这里假设你有一个高亮状态的字段 const parentNode = this.$refs.treeRef.getNodeByPath(node.parent.path); parentNode.highlighted = true; } }, }, // ...其他组件配置 }; </script> ``` 4. 如果你想在多个地方跟踪高亮状态，你可能需要创建一个全局变量或者在组件实例的data里维护一个数组来存储高亮的父节点。 记得在实际项目中，你需要根据你的具体数据结构和组件API来调整代码。如果有多个层级的高亮需求，你可能需要递归处理。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值