feat(tree-select): header and footer visibility in empty data state (#…

…2573)
arco-design · Jul 21, 2023 · d7cf9e3 · d7cf9e3
1 parent 8448770
commit d7cf9e3
Show file tree

Hide file tree

Showing 3 changed files with 107 additions and 67 deletions.
diff --git a/packages/web-vue/components/tree-select/__demo__/dropdown-slots.md b/packages/web-vue/components/tree-select/__demo__/dropdown-slots.md
@@ -18,85 +18,101 @@ Custom Tree Select the header and footer of the drop-down box.
 
 ```vue
 <template>
-  <a-space>
-    <a-tree-select
-      :data="treeData"
-      placeholder="Please select ..."
-      style="width: 300px"
-    >
-      <template #header>
-        <div style="padding: 6px 12px;" >
-          <a-checkbox value="1">All</a-checkbox>
-        </div>
-      </template>
-    </a-tree-select>
-    <a-tree-select
-      :data="treeData"
-      placeholder="Please select ..."
-      style="width: 300px"
-    >
+  <a-form layout="inline" :model="form">
+   <a-form-item label="empty">
+      <a-switch v-model="form.empty" />
+    </a-form-item>
+    <a-form-item label="showHeaderOnEmpty">
+      <a-switch v-model="form.showHeaderOnEmpty" />
+    </a-form-item>
+    <a-form-item label="showFooterOnEmpty">
+      <a-switch v-model="form.showFooterOnEmpty" />
+    </a-form-item>
+  </a-form>
+  <a-tree-select
+    style="width: 300px"
+    placeholder="Please select ..."
+    :data="computedTreeData"
+    :show-header-on-empty="form.showHeaderOnEmpty"
+    :show-footer-on-empty="form.showFooterOnEmpty"
+  >
+    <template #header>
+      <div style="padding: 6px 12px;" >
+        <a-checkbox value="1">All</a-checkbox>
+      </div>
+    </template>
       <template #footer>
-        <div style="padding: 6px 0; text-align: center;">
-          <a-button>Click Me</a-button>
-        </div>
-      </template>
-    </a-tree-select>
-  </a-space>
+      <div style="padding: 6px 0; text-align: center;">
+        <a-button>Click Me</a-button>
+      </div>
+    </template>
+  </a-tree-select>
 </template>
 <script>
-  import { h } from 'vue';
+  import { h, reactive, computed } from 'vue';
   import { IconCalendar } from '@arco-design/web-vue/es/icon';
 
   export default {
     setup() {
-      return {
-        treeData
-      };
-    },
-  };
+      const form = reactive({
+        empty: false,
+        showHeaderOnEmpty: false,
+        showFooterOnEmpty: false,
+      });
 
-  const treeData = [
-    {
-      key: 'node1',
-      icon: () => h(IconCalendar),
-      title: 'Trunk',
-      children: [
+      const treeData = [
         {
-          key: 'node2',
-          title: 'Leaf',
-        },
-      ],
-    },
-    {
-      key: 'node3',
-      title: 'Trunk2',
-      icon: () => h(IconCalendar),
-      children: [
-        {
-          key: 'node4',
-          title: 'Leaf',
+          key: 'node1',
+          icon: () => h(IconCalendar),
+          title: 'Trunk',
+          children: [
+            {
+              key: 'node2',
+              title: 'Leaf',
+            },
+          ],
         },
         {
-          key: 'node5',
-          title: 'Leaf',
+          key: 'node3',
+          title: 'Trunk2',
+          icon: () => h(IconCalendar),
+          children: [
+            {
+              key: 'node4',
+              title: 'Leaf',
+            },
+            {
+              key: 'node5',
+              title: 'Leaf',
+            },
+          ],
         },
-      ],
-    },
-    {
-      key: 'node6',
-      title: 'Trunk3',
-      icon: () => h(IconCalendar),
-      children: [
         {
-          key: 'node7',
-          title: 'Leaf',
+          key: 'node6',
+          title: 'Trunk3',
+          icon: () => h(IconCalendar),
+          children: [
+            {
+              key: 'node7',
+              title: 'Leaf',
+            },
+            {
+              key: 'node8',
+              title: 'Leaf',
+            },
+          ],
         },
-        {
-          key: 'node8',
-          title: 'Leaf',
-        },
-      ],
+      ];
+
+      const computedTreeData = computed(() => {
+        return form.empty ? [] : treeData;
+      });
+
+      return {
+        form,
+        computedTreeData,
+      };
     },
-  ];
+  };
 </script>
 ```
diff --git a/packages/web-vue/components/tree-select/interface.ts b/packages/web-vue/components/tree-select/interface.ts
@@ -71,4 +71,6 @@ export interface TreeSelectProps {
   disableFilter: boolean;
   popupContainer: string | HTMLElement | null | undefined;
   fallbackOption: FallbackOption;
+  showHeaderOnEmpty?: boolean;
+  showFooterOnEmpty?: boolean;
 }
diff --git a/packages/web-vue/components/tree-select/tree-select.vue b/packages/web-vue/components/tree-select/tree-select.vue
@@ -57,7 +57,10 @@
         ]"
         :style="computedDropdownStyle"
       >
-        <div v-if="$slots.header && !isEmpty" :class="`${prefixCls}-header`">
+        <div
+          v-if="$slots.header && (!isEmpty || showHeaderOnEmpty)"
+          :class="`${prefixCls}-header`"
+        >
           <slot name="header" />
         </div>
         <slot v-if="loading" name="loader">
@@ -90,7 +93,10 @@
           :tree-slots="pickSubCompSlots($slots, 'tree')"
           @change="onSelectChange"
         />
-        <div v-if="$slots.footer && !isEmpty" :class="`${prefixCls}-footer`">
+        <div
+          v-if="$slots.footer && (!isEmpty || showFooterOnEmpty)"
+          :class="`${prefixCls}-footer`"
+        >
           <slot name="footer" />
         </div>
       </div>
@@ -402,6 +408,22 @@ export default defineComponent({
       type: [Boolean, Object] as PropType<boolean | ScrollbarProps>,
       default: true,
     },
+    /**
+     * @zh 空状态时是否显示header
+     * @en Whether to display the header in the empty state
+     */
+    showHeaderOnEmpty: {
+      type: Boolean as PropType<boolean>,
+      default: false,
+    },
+    /**
+     * @zh 空状态时是否显示footer
+     * @en Whether to display the footer in the empty state
+     */
+    showFooterOnEmpty: {
+      type: Boolean as PropType<boolean>,
+      default: false,
+    },
   },
   emits: {
     /**