javascript/element-plus
1
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2026-03-13 07:51:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(components): [tree] lazy load provide reject (#16099)

Browse Source
This commit is contained in:
btea
2024-03-23 10:55:23 +08:00
committed by GitHub
parent 79b6235fdf
commit 39a61350d3
3 changed files with 56 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
docs/en-US/component/tree.md
View File

@@ -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 |

43
docs/examples/tree/multiple-times-load.vue Normal file
View File

@@ -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>

5
packages/components/tree/src/model/node.ts
View File

@@ -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)