自定义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 的方式自定义每个节点的渲染方式，并在其中判断该节点是否被选中。如果选中则添加一个自定义的样式类名：

    <el-tree
          ref="treeRef"
          class="filter-tree"
          :data="data"
          :props="defaultProps"
          default-expand-all
          :filter-node-method="filterNode"
          @node-click="handleNodeClick"
        >
          <template #default="{ node, data }">
            <div :class="{ 'selected-node': data === selectedNode }">
              {{ node.label }}
            </div>
          </template>
        </el-tree>

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

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

最终效果如下：

 

 是不是非常的nice！！！