From ca677519b92317bf7c9be29daef5a0ba158146b0 Mon Sep 17 00:00:00 2001
From: btea <2356281422@qq.com>
Date: Fri, 13 Sep 2024 09:34:40 +0800
Subject: [PATCH] feat(components): [cascader-panel] add `empty` slot (#16274)

* feat(components): [cascader] add `empty-panel` slot

* chore: update version tag

* chore: update

* feat: rename empty-panel to empty

* chore: format

* test: add test case

* test: update

* Update docs/en-US/component/cascader.md
---
 docs/en-US/component/cascader.md              |  7 ++--
 .../components/cascader-panel/src/index.vue   |  6 +++-
 .../components/cascader-panel/src/menu.vue    |  2 +-
 .../cascader/__tests__/cascader.test.tsx      | 35 +++++++++++++++++++
 packages/components/cascader/src/cascader.vue |  6 +++-
 5 files changed, 50 insertions(+), 6 deletions(-)

diff --git a/docs/en-US/component/cascader.md b/docs/en-US/component/cascader.md
index c40a7bd935..e86dfe99e9 100644
--- a/docs/en-US/component/cascader.md
+++ b/docs/en-US/component/cascader.md
@@ -209,9 +209,10 @@ cascader/panel
 
 ### CascaderPanel Slots
 
-| Name    | Description                                                                                    | Scope                               |
-| ------- | ---------------------------------------------------------------------------------------------- | ----------------------------------- |
-| default | the custom content of cascader node, which are current Node object and node data respectively. | ^[object]`{ node: any, data: any }` |
+| Name           | Description                                                                                    | Scope                               |
+| -------------- | ---------------------------------------------------------------------------------------------- | ----------------------------------- |
+| default        | the custom content of cascader node, which are current Node object and node data respectively. | ^[object]`{ node: any, data: any }` |
+| empty ^(2.8.3) | the content of the panel when there is no data.                                                | —                                   |
 
 ### CascaderPanel Exposes
 
diff --git a/packages/components/cascader-panel/src/index.vue b/packages/components/cascader-panel/src/index.vue
index 74a8484125..7b852cd647 100644
--- a/packages/components/cascader-panel/src/index.vue
+++ b/packages/components/cascader-panel/src/index.vue
@@ -9,7 +9,11 @@
       :ref="(item) => (menuList[index] = item)"
       :index="index"
       :nodes="[...menu]"
-    />
+    >
+      <template #empty>
+        <slot name="empty" />
+      </template>
+    </el-cascader-menu>
   </div>
 </template>
 
diff --git a/packages/components/cascader-panel/src/menu.vue b/packages/components/cascader-panel/src/menu.vue
index 92f18aedb3..697405e7cc 100644
--- a/packages/components/cascader-panel/src/menu.vue
+++ b/packages/components/cascader-panel/src/menu.vue
@@ -23,7 +23,7 @@
       {{ t('el.cascader.loading') }}
     </div>
     <div v-else-if="isEmpty" :class="ns.e('empty-text')">
-      {{ t('el.cascader.noData') }}
+      <slot name="empty">{{ t('el.cascader.noData') }}</slot>
     </div>
     <svg
       v-else-if="panel?.isHoverMenu"
diff --git a/packages/components/cascader/__tests__/cascader.test.tsx b/packages/components/cascader/__tests__/cascader.test.tsx
index dc89a407b9..731d92bcd4 100644
--- a/packages/components/cascader/__tests__/cascader.test.tsx
+++ b/packages/components/cascader/__tests__/cascader.test.tsx
@@ -524,4 +524,39 @@ describe('Cascader.vue', () => {
       expect(inputEl.style.height).toEqual(`${sizeMap[size] - 2}px`)
     }
   })
+
+  describe('render empty slot', () => {
+    it('correct render panel empty slot', async () => {
+      const wrapper = _mount(() => (
+        <Cascader>
+          {{
+            empty: () => <div>-=-empty-=-</div>,
+          }}
+        </Cascader>
+      ))
+
+      await wrapper.find(TRIGGER).trigger('click')
+      const emptySlotEl = document.querySelector(
+        '.el-cascader-menu__empty-text'
+      )
+      expect(emptySlotEl?.textContent).toBe('-=-empty-=-')
+    })
+
+    it('correct render menu list empty slot', async () => {
+      const wrapper = _mount(() => (
+        <Cascader filterable>
+          {{
+            empty: () => <div>-=-empty-=-no-data</div>,
+          }}
+        </Cascader>
+      ))
+
+      const input = wrapper.find('input')
+      await input.trigger('focus')
+      const emptySlotEl = document.querySelector(
+        '.el-cascader-menu__empty-text'
+      )
+      expect(emptySlotEl?.textContent).toBe('-=-empty-=-no-data')
+    })
+  })
 })
diff --git a/packages/components/cascader/src/cascader.vue b/packages/components/cascader/src/cascader.vue
index fae02cd969..3a9fb25c46 100644
--- a/packages/components/cascader/src/cascader.vue
+++ b/packages/components/cascader/src/cascader.vue
@@ -152,7 +152,11 @@
         :render-label="$slots.default"
         @expand-change="handleExpandChange"
         @close="$nextTick(() => togglePopperVisible(false))"
-      />
+      >
+        <template #empty>
+          <slot name="empty" />
+        </template>
+      </el-cascader-panel>
       <el-scrollbar
         v-if="filterable"
         v-show="filtering"