feat(components): [tree-v2] add slot empty (#18980)

* feat(components): [tree-v2] add slot `empty`

* prettier format

Co-authored-by: sea <45450994+warmthsea@users.noreply.github.com>

* fix: prettier format

* test: add test case

---------

Co-authored-by: sea <45450994+warmthsea@users.noreply.github.com>

docs/en-US/component/tree-v2.md

@@ -145,6 +145,7 @@ tree-v2/filter
 
 ## TreeV2 Slots
 
-| Name | Description                                                                                    |
-| ---- | ---------------------------------------------------------------------------------------------- |
-| -    | Custom content for tree nodes. The scope parameter is `{ node: TreeNode, data: TreeNodeData }` |
+| Name           | Description                                                                                    |
+| -------------- | ---------------------------------------------------------------------------------------------- |
+| -              | Custom content for tree nodes. The scope parameter is `{ node: TreeNode, data: TreeNodeData }` |
+| empty ^(2.9.0) | empty you can customize content when data is empty.                                            |

packages/components/tree-v2/__tests__/tree.test.ts

@@ -98,6 +98,7 @@ const createTree = (
     methods?: TreeEvents
     slots?: {
       default?: string
+      empty?: string
     }
   } = {}
 ) => {
@@ -106,6 +107,11 @@ const createTree = (
       options.slots.default &&
       `<template #default="{node}">${options.slots.default}</template>`) ||
     ''
+  const emptySlot =
+    (options.slots &&
+      options.slots.empty &&
+      `<template #empty>${options.slots.empty}</template>`) ||
+    ''
   const wrapper = _mount(
     `
       <el-tree
@@ -132,7 +138,7 @@ const createTree = (
         @check="onNodeCheck"
         @current-change="onCurrentChange"
         @node-contextmenu="onNodeContextMenu"
-      >${defaultSlot}</el-tree>
+      >${defaultSlot}${emptySlot}</el-tree>
     `,
     {
       data() {
@@ -234,6 +240,21 @@ describe('Virtual Tree', () => {
     expect(wrapper.find('.el-tree__empty-text').text()).toBe(emptyText)
   })
 
+  test('render slot empty', async () => {
+    const { wrapper } = createTree({
+      data() {
+        return {
+          data: [],
+        }
+      },
+      slots: {
+        empty: `<div class="empty-slot-wrapper">empty</div>`,
+      },
+    })
+    await nextTick()
+    expect(wrapper.find('.empty-slot-wrapper').exists()).toBeTruthy()
+  })
+
   test('height', async () => {
     const { wrapper } = createTree({
       data() {

packages/components/tree-v2/src/tree.vue

@@ -34,9 +34,11 @@
       </template>
     </fixed-size-list>
     <div v-else :class="ns.e('empty-block')">
-      <span :class="ns.e('empty-text')">{{
-        emptyText ?? t('el.tree.emptyText')
-      }}</span>
+      <slot name="empty">
+        <span :class="ns.e('empty-text')">
+          {{ emptyText ?? t('el.tree.emptyText') }}
+        </span>
+      </slot>
     </div>
   </div>
 </template>