From 39a61350d3aa1f5d21a16df159f23790bd74ef65 Mon Sep 17 00:00:00 2001
From: btea <2356281422@qq.com>
Date: Sat, 23 Mar 2024 10:55:23 +0800
Subject: [PATCH] feat(components): [tree] lazy load provide reject (#16099)

---
 docs/en-US/component/tree.md               | 10 ++++-
 docs/examples/tree/multiple-times-load.vue | 43 ++++++++++++++++++++++
 packages/components/tree/src/model/node.ts |  5 ++-
 3 files changed, 56 insertions(+), 2 deletions(-)
 create mode 100644 docs/examples/tree/multiple-times-load.vue

diff --git a/docs/en-US/component/tree.md b/docs/en-US/component/tree.md
index acf3f07798..4795837092 100644
--- a/docs/en-US/component/tree.md
+++ b/docs/en-US/component/tree.md
@@ -35,6 +35,14 @@ tree/custom-leaf
 
 :::
 
+## Lazy loading multiple times ^(2.6.2)
+
+:::demo When lazily loading node data remotely, lazy loading may sometimes fail. In this case, you can call reject to keep the node status as is and allow remote loading to continue.
+
+tree/multiple-times-load
+
+:::
+
 ## Disabled checkbox
 
 The checkbox of a node can be set as disabled.
@@ -122,7 +130,7 @@ tree/draggable
 | node-key              | unique identity key name for nodes, its value should be unique across the whole tree                                                                                                                                                                                                                                                                                        | string                                 | —               | —       |
 | props                 | configuration options, see the following table                                                                                                                                                                                                                                                                                                                              | object                                 | —               | —       |
 | render-after-expand   | whether to render child nodes only after a parent node is expanded for the first time                                                                                                                                                                                                                                                                                       | boolean                                | —               | true    |
-| load                  | method for loading subtree data, only works when `lazy` is true                                                                                                                                                                                                                                                                                                             | function(node, resolve)                | —               | —       |
+| load                  | method for loading subtree data, only works when `lazy` is true                                                                                                                                                                                                                                                                                                             | function(node, resolve, reject)        | —               | —       |
 | render-content        | render function for tree node                                                                                                                                                                                                                                                                                                                                               | Function(h, `{ node, data, store }`)   | —               | —       |
 | highlight-current     | whether current node is highlighted                                                                                                                                                                                                                                                                                                                                         | boolean                                | —               | false   |
 | default-expand-all    | whether to expand all nodes by default                                                                                                                                                                                                                                                                                                                                      | boolean                                | —               | false   |
diff --git a/docs/examples/tree/multiple-times-load.vue b/docs/examples/tree/multiple-times-load.vue
new file mode 100644
index 0000000000..98541edd65
--- /dev/null
+++ b/docs/examples/tree/multiple-times-load.vue
@@ -0,0 +1,43 @@
+<template>
+  <el-tree style="max-width: 600px" :props="props" :load="loadNode" lazy />
+</template>
+
+<script lang="ts" setup>
+import type Node from 'element-plus/es/components/tree/src/model/node'
+
+interface Tree {
+  name: string
+  leaf?: boolean
+}
+
+const props = {
+  label: 'name',
+  children: 'zones',
+  isLeaf: 'leaf',
+}
+
+let time = 0
+const loadNode = (
+  node: Node,
+  resolve: (data: Tree[]) => void,
+  reject: () => void
+) => {
+  if (node.level === 0) {
+    return resolve([{ name: 'region' }])
+  }
+  time++
+  if (node.level >= 1) {
+    setTimeout(() => {
+      if (time > 3) {
+        return resolve([
+          { name: 'zone1', leaf: true },
+          { name: 'zone2', leaf: true },
+          { name: 'zone3', leaf: true },
+        ])
+      } else {
+        return reject()
+      }
+    }, 3000)
+  }
+}
+</script>
diff --git a/packages/components/tree/src/model/node.ts b/packages/components/tree/src/model/node.ts
index fbc9d16260..b3d5e1fa2c 100644
--- a/packages/components/tree/src/model/node.ts
+++ b/packages/components/tree/src/model/node.ts
@@ -547,8 +547,11 @@ class Node {
           callback.call(this, children)
         }
       }
+      const reject = () => {
+        this.loading = false
+      }
 
-      this.store.load(this, resolve)
+      this.store.load(this, resolve, reject)
     } else {
       if (callback) {
         callback.call(this)