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

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

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>
 

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"

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')
+    })
+  })
 })

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"