feat(tree-select): add empty slot (#1807)

Co-authored-by: yugang.cao <[email protected]> Co-authored-by: 07akioni <[email protected]>
tusen-ai · Dec 12, 2021 · 0c6718d · 0c6718d
1 parent 0845ddb
commit 0c6718d
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 8 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -18,6 +18,7 @@
 ### Feats
 
 - `n-tree-select` add `menu-props` prop.
+- `n-tree-select` add `empty` slot.
 - `n-cascader` add `empty` slot.
 - `n-popselect` add `action` slot.
 - `n-popselect` add `empty` slot.

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -18,6 +18,7 @@
 ### Feats
 
 - `n-tree-select` 新增 `menu-props` 属性
+- `n-tree-select` 新增 `empty` slot
 - `n-cascader` 新增 `empty` slot
 - `n-popselect` 新增 `action` slot
 - `n-popselect` 新增 `empty` slot

diff --git a/src/tree-select/demos/enUS/index.demo-entry.md b/src/tree-select/demos/enUS/index.demo-entry.md
@@ -60,3 +60,9 @@ debug
 | label | `string` | Displayed content of the option. The field used can be set using `label-field`. |
 | children? | `TreeSelectOption[]` | Child options of the option. The field used can be set using `children-field` |
 | disabled? | `boolean` | Option disabled state. |
+
+### TreeSelect Slots
+
+| Name   | Parameters | Description                            |
+| ------ | ---------- | -------------------------------------- |
+| empty  | `()`       | Empty state slot for the options menu. |
diff --git a/src/tree-select/demos/zhCN/index.demo-entry.md b/src/tree-select/demos/zhCN/index.demo-entry.md
@@ -62,3 +62,9 @@ debug
 | label | `string` | 选项的显示内容，可使用 `label-field` 修改字段名 |
 | children? | `TreeSelectOption[]` | 节点的子选项 |
 | disabled? | `boolean` | 是否禁用选项 |
+
+### TreeSelect Slots
+
+| 名称   | 参数 | 说明                |
+| ------ | ---- | ------------------- |
+| empty  | `()` | 菜单无数据时的 slot |
diff --git a/src/tree-select/src/TreeSelect.tsx b/src/tree-select/src/TreeSelect.tsx
@@ -12,7 +12,8 @@ import {
   watch,
   nextTick,
   watchEffect,
-  HTMLAttributes
+  HTMLAttributes,
+  renderSlot
 } from 'vue'
 import {
   FollowerPlacement,
@@ -667,7 +668,7 @@ export default defineComponent({
     }
   },
   render () {
-    const { mergedTheme, mergedClsPrefix } = this
+    const { mergedTheme, mergedClsPrefix, $slots } = this
     return (
       <div class={`${mergedClsPrefix}-tree-select`}>
         <VBinder>
@@ -805,12 +806,14 @@ export default defineComponent({
                                 <div
                                   class={`${mergedClsPrefix}-tree-select-menu__empty`}
                                 >
-                                  <NEmpty
-                                    theme={mergedTheme.peers.Empty}
-                                    themeOverrides={
-                                      mergedTheme.peerOverrides.Empty
-                                    }
-                                  />
+                                  {renderSlot($slots, 'empty', undefined, () => [
+                                    <NEmpty
+                                      theme={mergedTheme.peers.Empty}
+                                      themeOverrides={
+                                        mergedTheme.peerOverrides.Empty
+                                      }
+                                    />
+                                  ])}
                                 </div>
                               )}
                               <NBaseFocusDetector onFocus={this.handleTabOut} />