【VUE】el-tree根据不同状态，显示不同颜色_el-tree 如何实现单双行不同色-优快云博客

本文链接：https://blog.youkuaiyun.com/take_it_easy_hes/article/details/130759237

本文介绍了如何在Vue项目中使用ElementUI的el-tree组件，展示一个具有动态渲染、状态标识和操作按钮的插件数据源链接树，包括禁用、正常和异常状态的节点处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

:render-content="renderContent"

<el-tree
                class="filter-tree"
                :data="pluginDatasourceLinkTreeData"
                :props="{
                      value: 'id',             // ID字段名
                      label: 'name',         // 显示名称
                      children: 'children',   // 子级字段名
                      disabled: function (data, node) {
                        if (data.isEnable !== '1') {
                          return !data.leaf
                        }
                      }
                    }"
                default-expand-all
                highlight-current
                node-key="id"
                :filter-node-method="filterNode"
                :expand-on-click-node="false"
                @node-click="handleNodeClick"
                :render-content="renderContent"
                ref="pluginDatasourceLinkTree">
                   <span class="custom-tree-node" slot-scope="{ node, data}">
                    <span :style="{ color: data.isEnable === '0'? 'red': 'black'}">{{ node.label }}</span>
<!--                    <span>
                        <el-button type="text" class="tree-item-button" icon="el-icon-plus" @click="() => addChildTreeNode(data)"></el-button>
                        <el-button type="text" class="tree-item-button" icon="el-icon-edit-outline" @click="() => editTreeNode(data)"></el-button>
                        <el-button type="text" class="red tree-item-button" icon="el-icon-delete" @click="() => delTreeNode(data)"></el-button>
                    </span>-->
                  </span>
              </el-tree>

renderContent (h, { node, data, store }) {
  if (data.hasOwnProperty('isNormal')) {
    if (data.isNormal === '1') {
      return <span style="font-size: 14px;">{node.label}</span>
    } else {
      return <span style="font-size: 14px;color:red">{node.label}</span>
    }
  } else {
    return <span style="font-size: 14px;">{node.label}</span>
  }
},