After the el-tree is set to expand the node by default, the el-tree click node cannot be closed (the node-collapse event is triggered, and the node cannot be closed)

Modify, don't worry about the nonsense below, click here

I wrote a bunch of nonsense yesterday. In fact, if you want to expand the child node, then its parent node must be expanded, so it cannot be closed. I have nothing to look at the official document today, and found that the official has given attribute control, and the modification is complete. . . . . . .

<el-tree :auto-expand-parent="false"></el-tree>

The problem was solved directly yesterday. . . . . . . . . . . . .

Problem Description

There are a lot of gossips in this article, I have nothing to write and write about my own thoughts

The el-tree is used in the project . Considering that the amount of data is still so large, I want to save the user's operation on the node (save the node id that the user has clicked to expand, and perform a default expansion operation on it after the next entry or refresh )
Problem: In the later test, it was found that clicking on some nodes expanded at the first level, the nodes could not be closed. . . . .

Solution steps

Troubleshooting

Idea 1

Because I thought of binding the node close event of el-tree (node-collapse), so first consider that there is a problem with a certain line of code I wrote. code show as below

//data为节点对应的数据, uuid为节点绑定的node-key
nodeCollapse(data) {
    
    
  if(!data.uuid) {
    
    
    return
  }
  let tempSet = new Set(this.defaultExpandNode);
  tempSet.delete(data.uuid)
  this.defaultExpandNode = [...tempSet]
  localStorage.setItem('orgDefaultExpandNode', JSON.stringify(this.defaultExpandNode))
},

First I unbind the el-tree node close eventAt this time, no matter how many nodes you click to expand, it is no problem to click on the first-level node to close it. Then I judge that there is a problem in the bound node closing event

Idea 2

After repeated inspection of the nodeCollapse function of the binding event, it was found that there is no problem with the logic, and printing various data also feels no problem. But clicking on the first-level node still cannot be closed. . . .
At this time, I started to find the difference between the nodes that can be closed and the nodes that cannot be closed., It is found that the node that cannot be closed is often because its child nodes are in the expanded state.
At this time, I went to the official document of element-ui and found that in other examples, even if the child node is expanded, clicking the parent node can also be closed. . . . .

Idea 3

The above shows that the problem must be caused by the expanded child node, and then researched and studied my own code, I found that every time a node is clicked to expand, its uuid is stored to set the default expanded node.
First I store the uuid of a node and a child node below it . If I want to click to close the node, the uuid of its child nodes is bound to the default-expanded-keys of the el-tree.At this time, clicking the node to close is invalid。

solution

My original intention was to save each expanded node, so the first solution I came up with was: when a node is clicked to close, clear the uuids of all its child nodes from the storage
But due to the complexity of the data, it can be realized but not necessary, so I gave up this idea

Then in the test, it was found that el-tree has saved the user's expansion operation on the node, such as:
There are nodes B and C under node A, and I also expand nodes B and C. At this time, when I directly close node A and expand node A, nodes B and C are still in the expanded state. (Similarly, if only the B node is expanded, the A node is directly closed and then expanded, then only the B node is expanded, and the C node is closed)

So in the end I decided to only focus on the expansion and closure of the first level of the el-tree , the code is as follows

/**
* 保存当前已展开的节点，下一次进行默认展开
*/
// 节点展开触发事件
nodeExpand(data) {
    
    
  //只收集第一级的节点展开
  if(!data.uuid || data.type !== 0 || data.level !== 1) {
    
    
    return
  }
  let tempSet = new Set(this.defaultExpandNode);
  tempSet.add(data.uuid)
  this.defaultExpandNode = [...tempSet]
  localStorage.setItem('orgDefaultExpandNode', JSON.stringify(this.defaultExpandNode))
},
// 节点关闭触发事件
nodeCollapse(data) {
    
    
  //只关注第一级的节点关闭
  if(!data.uuid || data.type !== 0 || data.level !== 1) {
    
    
    return
  }
  let tempSet = new Set(this.defaultExpandNode);
  tempSet.delete(data.uuid)
  this.defaultExpandNode = [...tempSet]
  localStorage.setItem('orgDefaultExpandNode', JSON.stringify(this.defaultExpandNode))
},

finally solve the problem

Summarize

1. The default-expanded-keys attribute of el-tree, if you bind a node, its parent node must also be in the expanded state, and if you do not clear it, then you click on its parent node Closing is invalid.
2. el-tree will save the user's expansion of the node (it will be cleared after refreshing the page)
3. Accidentally wrote too much nonsense today, write less next time hahahahahahaha