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

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

### 如何设置 `el-tree` 节点属性 对于 Vue Element-UI 中的 `el-tree` 组件,可以通过多种方式来配置节点属性。一种常见的方式是在初始化树形数据时直接定义这些属性。 #### 使用自定义字段控制复选框显示 为了仅在特定级别的节点上显示复选框,可以在 CSS 层面隐藏不需要的复选框,并利用类名区分不同层次的节点[^1]: ```css .my-tree .el-tree-node__content label.el-checkbox { display: none; } .my-tree .el-tree-node__children label.el-checkbox { display: inline-block; margin-left: -17px; } ``` 上述样式规则适用于希望只让子节点展示复选框的情况。通过调整 `.my-tree` 和其他选择器中的具体路径,可以根据实际需求灵活应用此方案。 #### 动态设定节点状态 如果目标是动态地启用或禁用某些节点的选择功能,则可在组件内部编写逻辑处理函数,在获取到原始数据之后对其进行加工改造[^2]: ```javascript methods: { // 对象深拷贝辅助函数(可选) deepClone(source) { return JSON.parse(JSON.stringify(source)); }, // 处理并返回经过修改后的树状结构数据 processTreeNodes(data, level = 0) { const processedData = data.map((node) => ({ ...this.deepClone(node), disabled: false, children: node.children ? this.processTreeNodes(node.children, level + 1) : null })); // 基于当前层级决定是否开启/关闭checkbox if (level === 0 || someConditionBasedOnLevel(level)) { processedData.forEach(n => n.disabled = true); } return processedData; } } ``` 在此基础上,还可以进一步扩展该方法以支持更多复杂的业务场景,比如基于权限或其他条件来自定义每个节点的行为特性。 #### 数据绑定与事件监听 最后不要忘记将最终得到的数据赋值给 `el-tree` 的 `data` prop 并确保视图能够响应变化而更新。同时也可以考虑添加相应的钩子函数用于捕获用户的交互操作,从而实现更加丰富的用户体验。 ```html <template> <div class="demo"> <!-- 将处理过的treeData传递给el-tree --> <el-tree ref="tree" :data="processedTreeData" show-checkbox></el-tree> </div> </template> <script> export default { name: 'Demo', props: {}, components: {}, computed: { processedTreeData() { return this.processTreeNodes(this.rawTreeData); // rawTreeData应由API接口提供 } }, mounted(){ // 初始化加载完成后执行一次 console.log('Component has been loaded.'); } }; </script> ``` 以上就是针对 `el-tree` 设置节点属性的一些常用技巧和建议[^2].
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值