【VUE】el-tree根据不同状态，显示不同颜色

最新推荐文章于 2025-06-07 09:17:54 发布

可可肉粒多ོ༙༽

最新推荐文章于 2025-06-07 09:17:54 发布

阅读量684

点赞数 2

CC 4.0 BY-SA版权

分类专栏： VUE 文章标签： javascript servlet java

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

VUE 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在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>
  }
},