根据条件更改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);
}
相关推荐
Mr_li1 分钟前
给 Vue 开发者的 uni-app 快速指南
vue.js·uni-app
颜酱34 分钟前
单调队列:滑动窗口极值问题的最优解(通用模板版)
javascript·后端·算法
一拳不是超人2 小时前
Electron主窗口弹框被WebContentView遮挡?独立WebContentView弹框方案详解!
前端·javascript·electron
icebreaker3 小时前
Weapp-vite:原生模式之外,多一种 Vue SFC 选择
前端·vue.js·微信小程序
icebreaker3 小时前
重走 Vue 长征路 Weapp-vite:编译链路与 Wevu 运行时原理拆解
前端·vue.js·微信小程序
wuhen_n3 小时前
代码生成:从AST到render函数
前端·javascript·vue.js
Lee川3 小时前
从异步迷雾到优雅流程:JavaScript异步编程与内存管理的现代化之旅
javascript·面试
wuhen_n3 小时前
AST转换:静态提升与补丁标志
前端·javascript·vue.js
destinying4 小时前
性能优化之实战指南:让你的 Vue 应⽤跑得飞起
前端·javascript·vue.js
徐小夕5 小时前
JitWord Office预览引擎:如何用Vue3+Node.js打造丝滑的PDF/Excel/PPT嵌入方案
前端·vue.js·github