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): [cascader] lazyLoad support reject (#22283)

Browse Source 
* feat(components): [cascader] `lazyLoad` support reject

* feat: update

* fix: update

* feat: remove unnecessary change

* test: add new test

* fix: update

* feat: update

* docs: update

* docs: update
This commit is contained in:
btea
2025-09-29 18:27:16 +08:00
committed by GitHub
parent 896815b986
commit 046815e33d
5 changed files with 173 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
docs/en-US/component/cascader.md
View File

@@ -301,23 +301,23 @@ cascader/custom-header-footer
## CascaderProps
| Attribute | Description | Type | Default |
| -------------------------- | ---------------------------------------------------------------------------------------------------------- | --------------------------------------------------- | -------- |
| expandTrigger | trigger mode of expanding options | ^[enum]`'click' \| 'hover'` | click |
| multiple | whether multiple selection is enabled | ^[boolean] | false |
| checkStrictly | whether checked state of a node not affects its parent and child nodes | ^[boolean] | false |
| emitPath | when checked nodes change, whether to emit an array of node's path, if false, only emit the value of node. | ^[boolean] | true |
| lazy | whether to dynamic load child nodes, use with `lazyload` attribute | ^[boolean] | false |
| lazyLoad | method for loading child nodes data, only works when `lazy` is true | ^[Function]`(node: Node, resolve: Resolve) => void` | — |
| value | specify which key of node object is used as the node's value | ^[string] | value |
| label | specify which key of node object is used as the node's label | ^[string] | label |
| children | specify which key of node object is used as the node's children | ^[string] | children |
| disabled | specify which key of node object is used as the node's disabled | ^[string] | disabled |
| leaf | specify which key of node object is used as the node's leaf field | ^[string] | leaf |
| hoverThreshold | hover threshold of expanding options | ^[number] | 500 |
| checkOnClickNode ^(2.10.5) | whether to check or uncheck node when clicking on the node | ^[boolean] | false |
| checkOnClickLeaf ^(2.10.5) | whether to check or uncheck node when clicking on leaf node (last children). | ^[boolean] | true |
| showPrefix ^(2.10.5) | whether to show the radio or checkbox prefix | ^[boolean] | true |
| Attribute | Description | Type | Default |
| -------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | -------- |
| expandTrigger | trigger mode of expanding options | ^[enum]`'click' \| 'hover'` | click |
| multiple | whether multiple selection is enabled | ^[boolean] | false |
| checkStrictly | whether checked state of a node not affects its parent and child nodes | ^[boolean] | false |
| emitPath | when checked nodes change, whether to emit an array of node's path, if false, only emit the value of node. | ^[boolean] | true |
| lazy | whether to dynamic load child nodes, use with `lazyload` attribute | ^[boolean] | false |
| lazyLoad | method for loading child nodes data, only works when `lazy` is true. The reject parameter is supported after version ^(2.11.5). | ^[Function]`(node: Node, resolve: Resolve, reject: () => void) => void` | — |
| value | specify which key of node object is used as the node's value | ^[string] | value |
| label | specify which key of node object is used as the node's label | ^[string] | label |
| children | specify which key of node object is used as the node's children | ^[string] | children |
| disabled | specify which key of node object is used as the node's disabled | ^[string] | disabled |
| leaf | specify which key of node object is used as the node's leaf field | ^[string] | leaf |
| hoverThreshold | hover threshold of expanding options | ^[number] | 500 |
| checkOnClickNode ^(2.10.5) | whether to check or uncheck node when clicking on the node | ^[boolean] | false |
| checkOnClickLeaf ^(2.10.5) | whether to check or uncheck node when clicking on leaf node (last children). | ^[boolean] | true |
| showPrefix ^(2.10.5) | whether to show the radio or checkbox prefix | ^[boolean] | true |
## Type Declarations
@@ -336,7 +336,7 @@ type Resolve = (data: any) => void
type ExpandTrigger = 'click' | 'hover'
type LazyLoad = (node: Node, resolve: Resolve) => void
type LazyLoad = (node: Node, resolve: Resolve, reject: () => void) => void
type isDisabled = (data: CascaderOption, node: Node) => boolean

122
packages/components/cascader-panel/__tests__/cascader-panel.test.tsx
View File

@@ -598,6 +598,128 @@ describe('CascaderPanel.vue', () => {
vi.useRealTimers()
})
test('lazy load with loaded fails', async () => {
vi.useFakeTimers()
const value = ref([])
const props: CascaderProps = {
lazy: true,
lazyLoad(node, resolve, reject) {
const { level } = node
setTimeout(() => {
const nodes = Array.from({ length: level + 1 }).map(() => ({
value: ++id,
label: `option${id}`,
leaf: level >= 2,
}))
if (level === 1) {
// Simulate loading failure for the second level nodes
reject()
return
}
resolve(nodes)
}, 1000)
},
}
const wrapper = mount(() => (
<CascaderPanel v-model={value.value} props={props} />
))
vi.runAllTimers()
await nextTick()
const firstOption = wrapper.find(NODE)
expect(firstOption.exists()).toBe(true)
await firstOption.trigger('click')
expect(firstOption.findComponent(Loading).exists()).toBe(true)
vi.runAllTimers()
await nextTick()
expect(firstOption.findComponent(Loading).exists()).toBe(false)
expect(wrapper.findAll(MENU).length).toBe(1)
vi.useRealTimers()
})
test('lazy load with first level loaded fails', async () => {
vi.useFakeTimers()
const value = ref([])
const props: CascaderProps = {
lazy: true,
lazyLoad(node, resolve, reject) {
const { level } = node
setTimeout(() => {
const nodes = Array.from({ length: level + 1 }).map(() => ({
value: ++id,
label: `option${id}`,
leaf: level >= 2,
}))
if (level === 0) {
// Simulate loading failure for the first level nodes
reject()
return
}
resolve(nodes)
}, 1000)
},
}
const wrapper = mount(() => (
<CascaderPanel v-model={value.value} props={props} />
))
vi.runAllTimers()
await nextTick()
const firstOption = wrapper.find(NODE)
expect(firstOption.exists()).toBe(false)
expect(wrapper.findAll(MENU).length).toBe(1)
expect(wrapper.findComponent(Loading).exists()).toBe(false)
expect(wrapper.find('.is-empty').exists()).toBe(true)
vi.useRealTimers()
})
test('lazy load with first and second level loaded success and third level loaded fails', async () => {
vi.useFakeTimers()
const value = ref([])
const props: CascaderProps = {
lazy: true,
lazyLoad(node, resolve, reject) {
const { level } = node
setTimeout(() => {
const nodes = Array.from({ length: level + 1 }).map(() => ({
value: ++id,
label: `option${id}`,
leaf: level >= 2,
}))
if (level === 2) {
// Simulate loading failure for the second level nodes
reject()
return
}
resolve(nodes)
}, 1000)
},
}
const wrapper = mount(() => (
<CascaderPanel v-model={value.value} props={props} />
))
vi.runAllTimers()
await nextTick()
const firstOption = wrapper.find(NODE)
expect(firstOption.exists()).toBe(true)
await firstOption.trigger('click')
expect(firstOption.findComponent(Loading).exists()).toBe(true)
vi.runAllTimers()
await nextTick()
expect(firstOption.findComponent(Loading).exists()).toBe(false)
expect(wrapper.findAll(MENU).length).toBe(2)
const secondMenu = wrapper.findAll(MENU)[1]
const secondOption = secondMenu.find(NODE)
await secondOption.trigger('click')
expect(secondOption.findComponent(Loading).exists()).toBe(true)
vi.runAllTimers()
await nextTick()
expect(secondOption.findComponent(Loading).exists()).toBe(false)
expect(wrapper.findAll(MENU).length).toBe(2)
vi.useRealTimers()
})
test('lazy load with default primitive value', async () => {
vi.useFakeTimers()
const props = {

20
packages/components/cascader-panel/src/index.vue
View File

@@ -83,6 +83,7 @@ const slots = useSlots()
let store: Store
const initialLoaded = ref(true)
const initialLoadedOnce = ref(false)
const menuList = ref<CascaderMenuInstance[]>([])
const checkedValue = ref<CascaderValue>()
const menus = ref<CascaderNode[][]>([])
@@ -128,9 +129,20 @@ const lazyLoad: ElCascaderPanelContext['lazyLoad'] = (node, cb) => {
_node.childrenData = _node.childrenData || []
dataList && store?.appendNodes(dataList, parent as Node)
dataList && cb?.(dataList)
if (node.level === 0) {
initialLoadedOnce.value = true
}
}
cfg.lazyLoad(node, resolve)
const reject = () => {
node!.loading = false
node!.loaded = false
if (node!.level === 0) {
initialLoaded.value = true
}
}
cfg.lazyLoad(node, resolve, reject)
}
const expandNode: ElCascaderPanelContext['expandNode'] = (node, silent) => {
@@ -376,6 +388,11 @@ watch(
}
)
const loadLazyRootNodes = () => {
if (initialLoadedOnce.value) return
initStore()
}
onBeforeUpdate(() => (menuList.value = []))
onMounted(() => !isEmpty(props.modelValue) && syncCheckedValue())
@@ -397,5 +414,6 @@ defineExpose({
clearCheckedNodes,
calculateCheckedValue,
scrollToExpandingNode,
loadLazyRootNodes,
})
</script>

6
packages/components/cascader-panel/src/types.ts
View File

@@ -14,7 +14,11 @@ export type ExpandTrigger = 'click' | 'hover'
export type isDisabled = (data: CascaderOption, node: CascaderNode) => boolean
export type isLeaf = (data: CascaderOption, node: CascaderNode) => boolean
export type Resolve = (dataList?: CascaderOption[]) => void
export type LazyLoad = (node: CascaderNode, resolve: Resolve) => void
export type LazyLoad = (
node: CascaderNode,
resolve: Resolve,
reject: () => void
) => void
export interface RenderLabelProps {
node: CascaderNode
data: CascaderOption

9
packages/components/cascader/src/cascader.vue
View File

@@ -749,6 +749,15 @@ watch(realSize, async () => {
watch(presentText, syncPresentTextValue, { immediate: true })
watch(
() => popperVisible.value,
(val) => {
if (val && props.props.lazy && props.props.lazyLoad) {
cascaderPanelRef.value?.loadLazyRootNodes()
}
}
)
onMounted(() => {
const inputInner = inputRef.value!.input!