el-tree设置选中高亮/焦点高亮、选中节点加深背景及更改字体颜色等的方法

设置选中高亮/焦点高亮、选中节点加深背景及更改字体颜色等功能是el-tree组件中常用的操作。本文将详细讲解如何使用Vue和Element UI来实现这些功能。

设置选中高亮/焦点高亮

使用Element UI的el-tree组件时，选中节点会有默认的选中状态样式。如果我们需要自定义选中状态样式，可以通过CSS来实现。当节点被选中时，它会添加一个.is-current属性。通过CSS中的样式选择器来控制选中状态样式，具体代码如下：

.el-tree .is-current > .el-tree-node__content {
  background-color: #eef7ff;
  color: #409eff;
}

以上代码的作用是在选中节点时修改选中节点的背景颜色以及文字颜色。

设置选中节点加深背景

在el-tree组件中，可以通过自定义节点的插槽来实现选中节点加深背景的效果。在节点的插槽中添加一个背景元素，当节点被选中时，动态修改这个元素的样式来实现选中节点加深背景的效果。代码示例如下：

<el-tree-node :node-data="node" :props="props" @current-change="handleNodeClick">
  <div slot="label" class="tree-node-label">
    <span>{{node.label}}</span>
    <div class="tree-node-bg"></div>
  </div>
</el-tree-node>

.tree-node-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: transparent;
  transition: all .2s ease-in-out;
}
.el-tree .is-current .tree-node-bg {
  background-color: #eef7ff;
}

以上代码的作用是定义了一个背景元素，并添加了一个过渡效果。在节点被选中时，通过修改元素的样式来实现选中节点加深背景的效果。

更改字体颜色

在el-tree组件中，可以通过为el-tree-node__label类添加颜色样式来修改节点文字的颜色，如下所示：

.el-tree-node__label {
  color: #606266;
}

以上代码的作用是将节点文字颜色修改为#606266。