根据条件更改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);
}
相关推荐
半桶水专家10 小时前
vue中的props详解
前端·javascript·vue.js
长安牧笛10 小时前
社区银发智慧陪伴系统,AI模拟家人语气聊天,监测老年人日常活动,如用药,出门,异常情况,自动推送给子女,兼顾陪伴与安全。
javascript
阿蒙Amon10 小时前
JavaScript学习笔记:3.控制流与错误处理
javascript·笔记·学习
前端不太难10 小时前
RN 遇到复杂手势(缩放、拖拽、旋转)时怎么设计架构
javascript·vue.js·架构
白兰地空瓶10 小时前
一行 npm init vite,前端工程化的世界就此展开
前端·vue.js·vite
xiaoxue..10 小时前
LeetCode 第 15 题:三数之和
前端·javascript·算法·leetcode·面试
flashlight_hi10 小时前
LeetCode 分类刷题:101. 对称二叉树
javascript·算法·leetcode
码力巨能编10 小时前
Markdown 作为 Vue 组件导入
前端·javascript·vue.js
xiaoxue..10 小时前
哨兵节点与快慢指针解决链表算法难题
前端·javascript·数据结构·算法·链表
尽欢i10 小时前
踩过坑才懂:前端生成唯一 ID,别用 Date.now ()了!一行代码搞定
前端·javascript