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;
};

实现效果

相关推荐
某公司摸鱼前端1 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~1 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程2 小时前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
wen's3 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
vvilkim4 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron
vvilkim4 小时前
Electron 应用中的内容安全策略 (CSP) 全面指南
前端·javascript·electron
aha-凯心4 小时前
vben 之 axios 封装
前端·javascript·学习
漫谈网络4 小时前
WebSocket 在前后端的完整使用流程
javascript·python·websocket
喜欢敲代码的程序员5 小时前
SpringBoot+Mybatis+MySQL+Vue+ElementUI前后端分离版:项目搭建(一)
spring boot·mysql·elementui·vue·mybatis
失落的多巴胺6 小时前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5