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

实现效果

相关推荐
GISer_Jing27 分钟前
0926第一个口头OC——快手主站前端
开发语言·前端·javascript
奶糖 肥晨2 小时前
Uniapp 开发中遭遇「可选链赋值」语法陷阱:一次编译错误排查实录
javascript·vue.js·uni-app
个人看法2 小时前
h5实现一个吸附在键盘上的工具栏
前端·javascript·vue
belldeep2 小时前
python:Django 和 Vue.js 技术栈解析
vue.js·python·django
知识分享小能手3 小时前
微信小程序入门学习教程,从入门到精通,微信小程序页面制作(2)
前端·javascript·学习·微信小程序·小程序·前端框架·notepad++
jason_yang3 小时前
JavaScript 风格指南 精选版
前端·javascript·代码规范
小高0073 小时前
🔍ECMAScript 2025 有哪些新特性?
前端·javascript
正义的大古3 小时前
OpenLayers地图交互 -- 章节十七:键盘缩放交互详解
javascript·vue.js·openlayers
Hashan3 小时前
elpis-core:基于 Koa 的轻量级 Web 应用框架
前端·javascript·node.js
前端Hardy4 小时前
轻松搞定JavaScript数组方法,面试被问直接答!
前端·javascript·面试