vue 目录树的展开与关闭_vue3 怎么知道eltree 是点击开启还是点击关闭

<el-tree
    :data="data_option"
    ref="tree"
    :props="defaultProps"
    @node-click="handleNodeClick"
    :default-expanded-keys="needExpandedKeys"
    node-key="type_id"
    highlight-current
  >
</el-tree>


expandedKeys: [], //所有treenode的id
needExpandedKeys: [], //需要展开的treenode的id数组
needExpandedNodes:[],//需要展开的treenode的node数组
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

关键在于以下两行代码

 :default-expanded-keys="needExpandedKeys"  // needExpandedKeys数组，用来保存展开节点的唯一值
 node-key="type_id"  //每个节点的唯一值，这里我的唯一值是type_id
1
2

data_option 数组如果没有这个唯一值怎么办，给它加一个

//list 是目录树节点以及目录树节点下的文件所组成的一个数组
this.data_option = this.addTypeIdToTreeNode(list);  

addTypeIdToTreeNode(lastList) {
      //传进去的list是有tree又有file
      //给每个node节点添加type_id，用来展开目录设置唯一值
      let treeData = lastList;
      const addIdToTree = (treeData) => {
        return treeData.map((node, index) => {
          if (!node._id) {  //根据自己目录树数组的实际情况修改，因为我这个_id有用所以需要判断
            const newNode = {
              ...node,
              type_id: node.type_code == 0 ? "wfl000" : node.type_code,
            }; // 创建一个新的节点，包括原有的属性和新的 _id 属性
            if (node.childrens && node.childrens.length > 0) {
              newNode.childrens = addIdToTree(node.childrens); // 递归处理子节点
            }
            return newNode;
          } else {
            const newNode = { ...node, type_id: node._id }; // 创建一个新的节点，包括原有的属性和新的 _id 属性
            return newNode;
          }
        });
      };
      const treeDataWithId = addIdToTree(treeData);
      let str = [];
      const getStr = function (list) {
        list.forEach(function (row) {
          if (row.childrens) {
            str.push(row.type_id);
            getStr(row.childrens);
          } else {
            str.push(row.type_id);
          }
        });
      };
      getStr(treeDataWithId);
      this.expandedKeys = str;
      // console.log("需要展开的treenode", this.expandedKeys);
      // console.log("需要展开的treeDataWithId", treeDataWithId);
      return treeDataWithId;
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

1、翻页方法中控制目录树节点的展开与关闭

this.$nextTick(() => {
   this.$refs.tree.setCurrentKey(
     this.userArr[0].type_id  //高亮当前节点，type_id 唯一值确定节点
   );
   //展开高亮文件的目录
   this.expandedKeys.forEach((node) => {
     if (
      //this.indexLocation 翻页之后是a文件，a文件的下标
       this.userArr[this.indexLocation].type_id.indexOf(node) !== -1  
     ) {
       this.needExpandedKeys.push(node);
     }
   });
   this.needExpandedKeys.forEach((node) => {
     this.$refs.tree.store.setCheckedNodes([node], true);
   });
 });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

2、搜索目录树节点名称控制节点的展开与关闭

//搜索
    goToSearch(){
      let treedata = this.data_option
      if(this.searchStr){
        //需要关闭所有节点 //除了上次搜索展开的节点还有自己点击展开的节点
        this.changeTreeNodeStatus(this.$refs.tree.store.root)
        this.needExpandedNodes = []
        this.needExpandedKeys = []
        //获取需要展开的节点数组
        this.findTypeCode(treedata, this.searchStr)
        this.needExpandedNodes.forEach(item=>{
          this.needExpandedKeys.push(item.type_id)
        })
        if(this.needExpandedKeys.length == 0){
          this.$message.error("没有找到您搜索的目录节点")
        }else{
          //模拟点击该节点，使其高亮，默认高亮搜索出的第一个节点
          this.handleNodeClick(this.needExpandedNodes[0],this.$refs.tree.getNode(this.needExpandedKeys[0]))
        }
        console.log("needExpandedKeys",this.needExpandedKeys)
      }else{
        this.changeTreeNodeStatus(this.$refs.tree.store.root)
        this.needExpandedNodes = []
        this.needExpandedKeys = []
      }
      
    },
    //循环拿到需要展开的目录子节点
    findTypeCode(treeData, targetName) {
      // 遍历树结构
      for (let i = 0; i < treeData.length; i++) {
        const node = treeData[i];
        // 如果节点的 type_name 包含目标名称，返回该节点的 type_code
        if (node.type_name.includes(targetName)) {
        // if (node.type_name==targetName) {
          console.log(node.type_id)
          if(node.type_id){
            this.needExpandedNodes.push(node)
          }
        }
        
        // 如果节点有子节点，递归调用自身进行深度优先搜索
        if (node.childrens && node.childrens.length > 0) {
          const result = this.findTypeCode(node.childrens, targetName);
          
          // 如果在子树中找到了匹配的节点，返回结果
          if (result) {
            return result;
          }
        }
      }
      // 如果没有找到匹配的节点，返回 null 或者适合您的默认值
      return null;
    },
    changeTreeNodeStatus(node) {
      node.expanded = false
      for (let i = 0; i < node.childNodes.length; i++) {
        // 改变节点的自身expanded状态
        node.childNodes[i].expanded = this.defaultExpand
        // 遍历子节点
        if (node.childNodes[i].childNodes.length > 0) {
          this.changeTreeNodeStatus(node.childNodes[i])
        }
      }
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

记录一个比较重要的点：高亮某行目录树节点

this.handleNodeClick(this.needExpandedNodes[0],this.$refs.tree.getNode(this.needExpandedKeys[0]))

//即：
this.handleNodeClick(node, this.$refs.tree.getNode(node))
//node为 目录树的一个节点，在我这儿比如data_option数组中的某个对象
1
2
3
4
5