el-tree点击节点再点击其他地方之前的高亮背景消失解决

el-tree点击节点再点击其他地方之前的高亮背景消失解决

前几天一个月薪35k的兄弟,给我推了一个人工智能学习网站,看了一段时间挺有意思的。包括语音识别、机器翻译等从基础到实战都有,很详细,分享给大家。大家及时保存,说不定啥时候就没了。

效果

点击其他地方,这个高亮不会消失
在这里插入图片描述

代码

在这里插入图片描述

<el-tree
  :data="myIndexTreeData"
  :highlight-current="highlightBd"
  :props="defaultProps"
  @node-expand="handleNodeClick"
  @node-click="handleNodeClick"
>
</el-tree>

data: {
  return {
     highlightBd: true,
  }
}

// 修改高亮背景色和color
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  background-color: #fcf5f3;
  color: #dac79c;
}
  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
el-tree-select节点点击的问题可能是由于冲突导致的。其中可能存在两种冲突情况。第一种是点击事件冲突,可能是因为触发了两次点击,一个是当前节点的handleNodeClick,另一个是onclick,导致了背景色丢失。解决这个问题可以检查代码中是否存在重复的点击事件,并进行相应的处理。第二种是驱动tree高亮的冲突,可能是因为在需要点击按钮让tree高亮显示时,值可能为null导致样式节点丢失。解决这个问题可以使用条件判断来避免空值导致的问题。例如使用`newVal && this.$refs.tree.setCurrentKey(newVal)`来进行空值判断。\[3\] #### 引用[.reference_title] - *1* [el-select 多选模式下嵌套el-tree 删除tag时能去掉el-tree对应节点的勾](https://blog.csdn.net/dabaoai123123/article/details/126075532)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [el-table+el-tree+el-select动态选择对应值](https://blog.csdn.net/weixin_43388691/article/details/127385435)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [el-tree失去焦点丢失节点背景色](https://blog.csdn.net/Y4258/article/details/126655778)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值