根据条件更改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);
}
相关推荐
独泪了无痕8 小时前
Vue3 Hooks使用实战解析
前端·vue.js
shawxlee9 小时前
vue3在public下封装config.js自定义配置动态数据,可在打包后直接修改,方便后端部署及后续维护
前端·javascript·经验分享·vue·团队开发·js·项目优化
kyriewen10 小时前
我给前端项目的接口请求套了6层保护——才发现以前一直在裸奔
前端·javascript·面试
郝亚军12 小时前
如何安装webstorm、Node.js和vue CLI
前端·javascript·vue.js
an3174213 小时前
6MB 组织树大文件性能优化全流程
前端·javascript·vue.js
GitLqr13 小时前
Vue 3.6 Vapor Mode vs React 19 Compiler:前端架构的两条分叉路
vue.js·react.js·vapor
TeamDev14 小时前
JxBrowser 9.3.1 版本发布啦!
java·前端·javascript·c#·混合应用·jxbrowser·浏览器控件
整點薯條15 小时前
Vue3+vite创建项目架构文件说明总结
前端·javascript·vue.js
前端甜糖16 小时前
记录We码开发者工具的一个bug
前端·javascript
猫32816 小时前
echarts 日常问题解决
前端·javascript·echarts