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

el-tree标签设置

html 复制代码
      <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" 事件

javascript 复制代码
interface Tree {
  // 树节点的label,名称
  label: string
  // 树节点的value,代码
  value: string
  // 子节点
  children?: Tree[]
}

// 当前点击选择的树节点
const currentNode = ref<Tree>();

// 点击树节点
const onTreeNodeClick = async (node: Tree) => {
  currentNode.value = node;
};

实现效果

相关推荐
薄雾晚晴7 分钟前
Rspack 实战:用 image-minimizer-webpack-plugin 做图片压缩,优化打包体积
javascript·vue.js
niuhuahua8 分钟前
大模型流式聊天,实时对话,快捷问题选项
vue.js
JIngJaneIL16 分钟前
汽车租赁|基于Java+vue的汽车租赁系统(源码+数据库+文档)
java·vue.js·spring boot·汽车·论文·毕设·汽车租赁系统
kymjs张涛29 分钟前
零一开源|前沿技术周刊 #15
前端·javascript·面试
Artea30 分钟前
聊聊 Vue3 的泛型
vue.js
BYSJMG30 分钟前
计算机毕业设计选题:基于Spark+Hadoop的健康饮食营养数据分析系统【源码+文档+调试】
大数据·vue.js·hadoop·分布式·spark·django·课程设计
古夕32 分钟前
Vue3 + vue-query 的重复请求问题解决记录
前端·javascript·vue.js
不知名程序员第二部32 分钟前
前端-业务-架构
前端·javascript·代码规范
华仔啊33 分钟前
面试官:请解释一下 JS 的 this 指向。别慌,看完这篇让你对答如流!
前端·javascript
小高00734 分钟前
💥💥💥前端“隐藏神技”:15 个高效却鲜为人知的 Web API 大起底
前端·javascript