我们可以利用 `setTimeout` 函数来模拟数据加载的过程，同时通过直接使用 `resolve` 方法来模拟数据加载失败的情形。以下是相关的代码示例，我们会注意到，在数据加载完成后，再次进行点击操作时，数据将无法重新加载。

代码示例

javascript// 代码示例省略

分析

从源码分析中，我们可以发现，系统内部有一个变量用于判断是否可以重新加载数据。具体而言，我们可以通过将 `loaded` 变量设置为 `false` 来实现再次点击时可以重新加载数据的效果。相关的代码片段如下：

javascriptconst handleExpand = () => {  const { node } = props;  // 不排除叶子节点，因为它们的菜单展开可能需要重置  if (!expandable.value || node.loading) return;  node.loaded ? doExpand() : doLoad();}

在这个代码段中，`handleExpand` 函数负责处理节点的展开逻辑。如果节点已经加载完毕，则执行展开操作；若尚未加载，则触发加载过程。

问题描述

在某些情况下，子级数据并不存在，导致上级节点一直处于加载状态。正常情况下，节点的状态应该是清晰的，如下图所示。然而，当我们修改子级数据的 `value` 后，发现上级节点依然保持在加载状态。通过开发者工具查看，我们发现负责控制 loading 状态的变量已被设置为 `false`，但界面仍然显示 loading 图标，如下图所示。

解决方案

为了解决这一问题，我们需要判断子级数据是否存在相应的值。如果不存在，则将级联选择器的值清空。这样一来，级联选择器将重新触发 `lazyLoad` 逻辑，只加载第一级的数据，从而避免了节点长时间处于加载状态的问题。这样处理后，用户体验将得到改善，界面状态也会更加清晰。