根据条件更改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);
}
相关推荐
有位神秘人19 分钟前
Android中Notification的使用详解
android·java·javascript
phltxy1 小时前
Vue 核心特性实战指南:指令、样式绑定、计算属性与侦听器
前端·javascript·vue.js
Byron07072 小时前
Vue 中使用 Tiptap 富文本编辑器的完整指南
前端·javascript·vue.js
Mr Xu_3 小时前
告别硬编码:前端项目中配置驱动的实战优化指南
前端·javascript·数据结构
Byron07073 小时前
从 0 到 1 搭建 Vue 前端工程化体系:提效、提质、降本实战落地
前端·javascript·vue.js
zhengfei6113 小时前
【AI平台】- 基于大模型的知识库与知识图谱智能体开发平台
vue.js·语言模型·langchain·知识图谱·多分类
徐小夕@趣谈前端4 小时前
Web文档的“Office时刻“:jitword共建版2.0发布!让浏览器变成本地生产力
前端·数据结构·vue.js·算法·开源·编辑器·es6
德育处主任Pro4 小时前
纯前端网格路径规划:PathFinding.js的使用方法
开发语言·前端·javascript
墨笔.丹青4 小时前
基于QtQuick开发界面设计出简易的HarmonyUI界面----下
开发语言·前端·javascript
董世昌414 小时前
深度解析浅拷贝与深拷贝:底层逻辑、实现方式及实战避坑
前端·javascript·vue.js