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

实现效果

相关推荐
灵感__idea4 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
试图让你心动6 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
_Kayo_6 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
陈琦鹏7 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数7 小时前
掌握JavaScript函数封装与作用域
前端·javascript
Carlos_sam8 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript
小毛驴8508 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
你这个年龄怎么睡得着的10 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
Dream耀10 小时前
提升React移动端开发效率:Vant组件库
前端·javascript·前端框架
NUC_Dodamce11 小时前
Cocos3x 解决同时勾选 适配屏幕宽度和 适配屏幕高度导致Widget组件失效的问题
开发语言·javascript·ecmascript