根据条件更改el-tree的字体颜色

embedded/2025/1/24 18:50:23/
html   

:render-content="renderContent"  树节点的内容区的渲染 Function

javascript">  <el-tree ref="treeRef" :data="props.data" show-checkbox default-expand-all node-key="label":check-strictly="checkStrictly" :props="defaultProps" @check-change="handleClick":default-checked-keys="props.platform" check-on-click-node :filter-node-method="filterNode"  :render-content="renderContent"></el-tree>

JS

javascript">const renderContent = (h, { node, data, store }) => {console.log(data);let style = {};let label = node.label; // 默认使用节点的标签//   if (data.hasOwnProperty('isNormal')) {if (data.type == '1') {style = { fontSize: '14px',color:'red' }; // 设置字体大小} else {style = { fontSize: '14px',  }; // 设置字体大小和颜色}
//   } else {
//     style = { fontSize: '14px' }; // 默认字体大小
//   }// 使用 h 函数创建一个 span 元素,并将样式和标签作为属性传递return h('span', { style }, label);
}


http://www.ppmy.cn/embedded/156636.html

相关文章

IDEA社区版(免费版)创建spring boot项目

1、社区版(免费版)安装spring插件 2、创建spring boot项目

一文了解二叉树的基本概念

文章目录 二叉树1二叉树的定义及其主要特征1.1二叉树的定义1.2二叉树的特点1.3二叉树的五种形态1.4二叉树与度为2的有序树的区别1.5几个特殊的二叉树1.6二叉树的性质 2二叉树的存储结构2.1二叉树的顺序存储2.2二叉树的链式存储 二叉树 1二叉树的定义及其主要特征 1.1二叉树的定…

Windows电脑不小心点击了关机,关机过程中如何阻止

如果电脑正在关机的过程中&#xff0c;想要阻止关机&#xff0c;可以尝试以下方法&#xff1a; 如果关机过程较慢&#xff0c;可以按下键盘组合键 Win R 打开运行窗口。输入 shutdown -a 后按回车键&#xff0c;这将中断关机操作&#xff08;适用于 Windows 系统&#xff09;…

深入理解 Java 并发编程中的锁机制

深入理解 Java 并发编程中的锁机制 在 Java 并发编程中&#xff0c;锁是一个至关重要的概念&#xff0c;它用于确保多个线程在访问共享资源时能够遵循正确的顺序和互斥规则。锁机制的设计和使用直接影响到程序的效率、正确性和可维护性。本文将从锁的基本概念讲起&#xff0c;…

Linux系统 C/C++编程基础——基于Qt的图形用户界面编程

ℹ️大家好&#xff0c;我是练小杰&#xff0c;今天周四了&#xff0c;距离除夕只有4天了&#xff0c;各位今年卫生都搞完了吗&#xff01;&#x1f606; 本文是接着昨天Linux 系统C/C编程的知识继续讲&#xff0c;基于Qt的图形用户界面编程概念及其命令&#xff0c;后续会不断…

HTML 属性大全:全面解析所有 HTML 属性

HTML 属性是 HTML 元素的重要组成部分&#xff0c;它们为元素提供了额外的信息或功能。无论是设置链接的目标地址、定义图片的替代文本&#xff0c;还是为元素添加样式&#xff0c;HTML 属性都扮演着关键角色。本文将基于 菜鸟教程的 HTML 参考手册&#xff0c;全面介绍所有 HT…

Flink 的核心特点和概念

Flink 是一个流式处理框架&#xff0c;专注于高吞吐量、低延迟的数据流处理。它能处理无限流&#xff08;即实时数据流&#xff09;和有限流&#xff08;批处理&#xff09;&#xff0c;具有很强的灵活性和可扩展性&#xff0c;广泛应用于实时数据分析、监控系统、数据处理平台…

【设计模式-行为型】状态模式

一、什么是状态模式 什么是状态模式呢&#xff0c;这里我举一个例子来说明&#xff0c;在自动挡汽车中&#xff0c;挡位的切换是根据驾驶条件&#xff08;如车速、油门踏板位置、刹车状态等&#xff09;自动完成的。这种自动切换挡位的过程可以很好地用状态模式来描述。状态模式…