el-tree按条件禁用树节点

最新推荐文章于 2025-02-26 11:51:18 发布

原创最新推荐文章于 2025-02-26 11:51:18 发布 · 9.6k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#vue #elementui #树结构 #前端

本文介绍了一种方法，通过递归遍历树结构来禁用除特定节点外的所有其他节点及其子节点。该方法适用于需要快速实现树形结构中部分节点禁用功能的应用场景。

业务要求：禁用相关设备以外的树结点。

这里需要禁用’1#泵‘结点以外的所有根节点及其以下的子结点。

一、递归循环所有节点，给对应的节点添加disable属性

拿到树的所有结点后，去遍历循环加上disable：true属性

addAttr(data) {
      data.forEach(item => {
        if (item.id !== this.detail.id) {
          item.disabled = true;
          if (item.childNodes && item.childNodes.length !== 0) {
            this.addAttr(item.childNodes);
          }
        }
      });
    },

效果：