el-tree刷新树默认展开/保留当前操作节点获取展开的节点

最新推荐文章于 2025-04-28 10:16:30 发布

转载最新推荐文章于 2025-04-28 10:16:30 发布 · 2.2k 阅读

4 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/iseyre/article/details/128344414

文章标签：

#vue.js #javascript #前端

文章讲述了如何在React应用中实现树形组件的节点展开与折叠功能，包括使用defaultExpandedKeys管理默认展开的节点，以及closeNode方法处理节点关闭时的子节点递归删除，同时提到了模糊查询功能的实现。

@node-expand="openNode"

@node-collapse="closeNode"

分别是展开节点时触发和收起节点时触发

:default-expanded-keys="defaultShowNodes"指定需要默认展开的数组

一定要加node-key,代表唯一的值，一般都是id

 openNode (data, node, self) {
      // console.log(data,node.self,'展开');
      // 保存当前展开的节点
      let flag = false
      this.defaultShowNodes.some(item => {
        if (item === data.id) { // 判断当前节点是否存在， 存在不做处理
          flag = true
          return
        }
      })
      if (!flag) { // 不存在则存到数组里
        this.defaultShowNodes.push(data.id)
      console.log(this.defaultShowNodes);
  }
    },
    closeNode (data, node, self) {
      //  console.log(data,node.self,'关闭');
      // 删除当前关闭的节点
      this.defaultShowNodes.some((item, i) => {
        if (item === data.id) {
          this.defaultShowNodes.splice(i, 1)
        }
      })
    // 这里主要针对多级树状结构，当关闭父节点时，递归删除父节点下的所有子节点
      this.removeChildrenIds(data)
      console.log(this.defaultShowNodes);
    },
   
    // 删除树子节点
    removeChildrenIds(data) {
      const ts = this
    //懒加载的时候想要删除子节点  得在加载下级数据时添加上data.children
      if (data.children) {
        data.children.forEach(function(item) {
          const index = ts.defaultShowNodes.indexOf(item.id)
          if (index != -1) {
            ts.defaultShowNodes.splice(index, 1)
          }
          ts.removeChildrenIds(item)
        })
      }
    },
   // 模糊查询
     filterNode(value, data) {
        if (!value) return true;
        return data.name.indexOf(value) !== -1;
      },