一键让el-tree刷新后节点保持展开状态，永不自动关闭

如何解决 Element UI Tree 组件刷新后节点自动展开的问题？

问题

Element UI 的 Tree 组件有时会出现一个令人烦恼的问题：在刷新组件后，已经展开的节点会自动关闭，而我们通常希望这些节点保持展开状态。这可能会造成用户体验不佳，因为用户需要手动重新展开这些节点，而这可能会很麻烦。

解决方法

方法一：使用 CSS 样式

代码示例：

.el-tree-node__children {
  display: block !important;
}

这种方法很简单，只需要在你的 CSS 文件中添加上述代码即可。它可以解决这个问题，但也会导致所有节点始终处于展开状态，即使你不想让它们处于展开状态。

优点：

• 简单易用
• 总能保证节点展开

缺点：

• 所有节点始终展开，可能不符合预期

方法二：使用 JavaScript 代码

代码示例：

const tree = document.querySelector('.el-tree');

tree.addEventListener('click', (event) => {
  const target = event.target;

  if (target.classList.contains('el-tree-node__expand-icon')) {
    const node = target.closest('.el-tree-node');

    if (node.classList.contains('is-expanded')) {
      node.classList.remove('is-expanded');
    } else {
      node.classList.add('is-expanded');
    }
  }
});

这种方法比方法一复杂一些，但它可以让你更好地控制节点的展开状态。你可以通过修改代码来决定哪些节点应该始终处于展开状态，哪些节点应该根据用户的交互而展开或关闭。

优点：

• 允许更好地控制节点的展开状态
• 可以根据用户的交互展开或关闭节点

缺点：

• 编写起来比方法一复杂

总结

以上两种方法都可以解决 Element UI Tree 组件刷新后节点自动展开的问题，你可以根据自己的需要选择其中一种方法。

常见问题解答

1. 为什么我的节点在刷新组件后仍然会自动关闭？

确保你已经正确应用了所选的方法。如果使用 CSS 方法，请检查你的样式文件是否已正确加载。如果使用 JavaScript 方法，请检查你的代码是否正确注册并绑定到 Tree 组件。

2. 我可以用 CSS 样式来控制哪些节点始终展开吗？

可以的，你可以使用 CSS 选择器来定位特定的节点并强制它们始终展开。例如，以下代码将强制具有特定类名的节点始终展开：

.my-always-expanded-node .el-tree-node__children {
  display: block !important;
}

3. 我可以在节点上附加其他自定义属性来控制它们的展开状态吗？

是的，你可以在节点上附加其他自定义属性，例如 data-always-expanded，并使用 JavaScript 来根据这些属性控制展开状态。

4. 有没有办法在不刷新组件的情况下展开或关闭节点？

是的，可以使用 expand() 和 collapse() 方法动态地展开或关闭节点，而无需刷新组件。

5. 为什么使用 JavaScript 方法比 CSS 方法更复杂？

JavaScript 方法提供了更细粒度的控制，但编写起来也更复杂，因为你需要注册事件监听器并编写逻辑来根据用户的交互展开或关闭节点。