Element-UI tree 组件 选中节点高亮的问题处理

Posted 2023-03-09

参考技术A 最近新做的项目，有用到Element-UI tree 组件，需求是选中的节点背景颜色改变（默认的太浅了），并且要求不切换的情况下一直保持高亮
由于项目的树比较多，我写了两种
1.点击后高亮显示的背景颜色修改（但是不能一直保持不变）
.el-tree-node:focus > .el-tree-node__content
background-color: rgb(158, 213, 250) !important;

这个只要改变css就可以达到效果

2.点击后显示高亮的效果，并且不切换的情况下高亮一直保持

css:
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content
background-color: rgb(158, 213, 250) !important;


js:

node-key="id"表示使用每个节点的"id"对应的值来表示每个节点
highlight-current"表示高亮选中的节点
这样就能让点击选中的节点保持高亮，在不切换的情况下一直高亮

element-ui el-tree选中子节点时默认选择父节点

参考技术A element-ui里el-tree选中子节点用getCheckedKeys()只返回子节点

如果需求是：选中任何一个子节点都默认选择父节点，怎么办？

其实，element-ui也提供了方案，常规下，如果子节点选中，那么这时父节点是半选中状态，在获取选中值时，只需要利用getHalfCheckedKeys()+getCheckedKeys()两个方法即可达到效果。