feat(components): [cascader] lazyLoad support reject (#22283)

* 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

packages/components/cascader-panel/__tests__/cascader-panel.test.tsx

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

packages/components/cascader-panel/src/index.vue

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

packages/components/cascader-panel/src/types.ts

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

packages/components/cascader/src/cascader.vue

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