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

最新推荐文章于 2025-10-23 01:36:23 发布

原创

最新推荐文章于 2025-10-23 01:36:23 发布 · 750 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #servlet #java

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

: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}">