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

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);
}
相关推荐
意法半导体STM322 分钟前
【官方原创】STM32H7双核芯片通过 STlink连接失败问题分析 LAT1654
开发语言·前端·javascript·stm32·单片机·嵌入式硬件
雨雨雨雨雨别下啦15 分钟前
Vue3——RabbitShopping
前端·javascript·vue.js
学习指针路上的小学渣1 小时前
JavaScript笔记
前端·javascript
coder_Eight2 小时前
彻底吃透 Promise:从状态、链式到手写实现,再到 async/await 底层原理
javascript·面试
@大迁世界2 小时前
13.在 React 中应怎样正确更新 state?
前端·javascript·react.js·前端框架·ecmascript
苏琢玉2 小时前
Go + Vue 打包成一个单二进制的后台系统,我做了个后台脚手架
vue.js·golang
终端鹿2 小时前
Suspense 异步组件与懒加载实战
前端·vue.js
Shaoxi Zhang2 小时前
pm2运行项目实践记录(通过ecosystem.config.js配置并自动运行)
javascript·python·pycharm
Jinuss2 小时前
源码分析之React中useRef解析
前端·javascript·react.js
cch89182 小时前
css 样式说明,在页面布局开发中,样式表用于控制组件的尺寸、间距、边框及背景等视觉表现
前端·javascript·html