【vue3】设置element-tree的选中效果focus，鼠标飘过hover和利用按钮触发this.$refs[“tree“].setCurrentKey进行选中的样式

原创于 2021-06-08 13:54:55 发布 · 3.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#js #css #vue

前端同时被 2 个专栏收录

24 篇文章

订阅专栏

GUI界面

3 篇文章

订阅专栏

本文介绍了如何在Vue项目中覆盖Element UI的Tree组件样式，包括修改鼠标点击时节点的颜色和失去焦点时的背景色。通过设置CSS选择器，可以实现选中、鼠标悬停时的不同视觉效果。同时，文章探讨了`setCurrentKey`方法在选中节点时的样式应用情况，分别展示了基于点击和程序触发选中状态时的样式差异。

参考：

方法：

设置element-tree，选中，鼠标飘过和利用setCurrentKey进行选中的样式

在这里插入图片描述
这里可以看到，有两个选中的样式设定，
这里一个是基于点击触发focus的样式，一个是基于current的触发选中。
他们的区别是，一个是鼠标点击导致的触发，一个可能是点击其他按钮或者触发事件，导致触发了函数this.$refs["tree"].setCurrentKey(caseId);
从而也触发了选中，但是这个选中是基于当前节点的选中
在这里插入图片描述

代码

.el-tree-node:focus > .el-tree-node__content {
  /*设置选中的样式 */
  background-color: #dde9ff !important;
}
.el-tree-node__content:hover {
  /*设置鼠标飘过的颜色 */
  background: #eaf9ff !important;
  color: #007bff;
}
 
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
   /*current选中的样式 */
    color: #4d95fd;
    font-weight: bold;
  background-color: #dde9ff !important;
}