Element Plus中el-tree点击的节点字体变色加粗

el-tree标签设置

      <el-tree class="tree":data="treeData":default-expand-all="true":highlight-current="true"@node-click="onTreeNodeClick"><!-- 自定义节点内容，点击的节点字体变色加粗 --><!-- 动态样式：通过<template #default>插槽自定义节点内容，使用:style绑定根据当前选择的节点值currentNode.value动态设置color和fontWeight --><template #default="{ node, data }"><span :style="{ color: currentNode?.value === data.value ? `#409EFF` : `#606266`, fontWeight: currentNode?.value === data.value ? `bold` : `normal`,}">{{ node.label }}</span></template></el-tree>

@node-click="onTreeNodeClick" 事件

interface Tree {// 树节点的label，名称label: string// 树节点的value，代码value: string// 子节点children?: Tree[]
}// 当前点击选择的树节点
const currentNode = ref<Tree>();// 点击树节点
const onTreeNodeClick = async (node: Tree) => {currentNode.value = node;
};

实现效果