自定义el-tree组件中点击某行数据时高亮效果

一、效果：

如下所示，这是elementUI中的tree组件，当点击某行数据的时候会有背景色，但是当鼠标点击别处时，便失去焦点，背景色随之消失了。

 而我想要的效果是，当点击某行数据，高亮该数据，且一直不消失，当点击另一行数据时，高亮效果切换到点击数据。

二、做法如下：

利用el-tree中的插槽

1）在 data 中添加一个变量用于保存当前选中的节点：

const selectedNode = ref(null);

2）在 handleNodeClick 方法中，更新 selectedNode 变量：

const handleNodeClick = (data: any) => {
  console.log(data);
  selectedNode.value = data;
};

3）在 el-tree 中通过 scoped-slot 的方式自定义每个节点的渲染方式，并在其中判断该节点是否被选中。如果选中则添加一个自定义的样式类名：

4）在样式表中添加 .selected-node 样式类，以定义选中节点的外观：

.selected-node {
  color: #409eff;
  font-weight: bold;
}

最终效果如下：

 

 是不是非常的nice！！！