perf(table): the table fills the height according to the screen close #…

…310
vbenjs · Mar 6, 2021 · 551fe50 · 551fe50
1 parent 745fcfc
commit 551fe50
Show file tree

Hide file tree

Showing 10 changed files with 135 additions and 138 deletions.
diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md
@@ -9,6 +9,8 @@
 
 - 表格关闭分页时不再携带分页参数
 - 登录页监听回车事件进行登录
+- 当表格设置自适应大小时,根据屏幕来铺满了高度.
+- Tree 滚动条优化
 
 ### 🐛 Bug Fixes
 

diff --git a/package.json b/package.json
@@ -109,7 +109,7 @@
     "vite-plugin-mock": "^2.2.0",
     "vite-plugin-purge-icons": "^0.7.0",
     "vite-plugin-pwa": "^0.5.6",
-    "vite-plugin-style-import": "^0.7.6",
+    "vite-plugin-style-import": "^0.8.1",
     "vite-plugin-svg-icons": "^0.2.1",
     "vite-plugin-theme": "^0.4.8",
     "vite-plugin-windicss": "0.6.10",

diff --git a/src/components/Page/src/PageWrapper.vue b/src/components/Page/src/PageWrapper.vue
@@ -1,6 +1,11 @@
 <template>
   <div :class="getClass">
-    <PageHeader :ghost="ghost" v-bind="$attrs" ref="headerRef">
+    <PageHeader
+      :ghost="ghost"
+      v-bind="$attrs"
+      ref="headerRef"
+      v-if="content || $slots.headerContent"
+    >
       <template #default>
         <template v-if="content">
           {{ content }}
@@ -11,7 +16,11 @@
         <slot :name="item" v-bind="data"></slot>
       </template>
     </PageHeader>
-    <div :class="[`${prefixCls}-content`, $attrs.contentClass]" :style="getContentStyle">
+    <div
+      class="m-4 overflow-hidden"
+      :class="[`${prefixCls}-content`, contentClass]"
+      :style="getContentStyle"
+    >
       <slot></slot>
     </div>
     <PageFooter v-if="getShowFooter" ref="footerRef">
@@ -48,6 +57,8 @@
       },
       contentBackground: propTypes.bool,
       contentFullHeight: propTypes.bool,
+      contentClass: propTypes.string,
+      fixedHeight: propTypes.bool,
     },
     setup(props, { slots }) {
       const headerRef = ref<ComponentRef>(null);
@@ -73,15 +84,17 @@
 
       const getContentStyle = computed(
         (): CSSProperties => {
-          const { contentBackground, contentFullHeight, contentStyle } = props;
+          const { contentBackground, contentFullHeight, contentStyle, fixedHeight } = props;
           const bg = contentBackground ? { backgroundColor: '#fff' } : {};
           if (!contentFullHeight) {
             return { ...bg, ...contentStyle };
           }
+          const height = `${unref(pageHeight)}px`;
           return {
             ...bg,
             ...contentStyle,
-            minHeight: `${unref(pageHeight)}px`,
+            minHeight: height,
+            ...(fixedHeight ? { height } : {}),
             paddingBottom: `${unref(footerHeight)}px`,
           };
         }
@@ -137,18 +150,11 @@
     position: relative;
 
     .ant-page-header {
-      // padding: 12px 16px;
-
       &:empty {
         padding: 0;
       }
     }
 
-    &-content {
-      // padding: 12px;
-      margin: 16px;
-    }
-
     &--dense {
       .@{prefix-cls}-content {
         margin: 0;

diff --git a/src/components/Table/src/BasicTable.vue b/src/components/Table/src/BasicTable.vue
@@ -3,6 +3,7 @@
     ref="wrapRef"
     :class="[
       prefixCls,
+      $attrs.class,
       {
         [`${prefixCls}-form-container`]: getBindValues.useSearchForm,
         [`${prefixCls}--inset`]: getBindValues.inset,
@@ -211,6 +212,8 @@
           propsData = omit(propsData, 'scroll');
         }
 
+        propsData = omit(propsData, 'class');
+
         return propsData;
       });
 

diff --git a/src/components/Table/src/hooks/useTableScroll.ts b/src/components/Table/src/hooks/useTableScroll.ts
@@ -55,6 +55,7 @@ export function useTableScroll(
   // No need to repeat queries
   let paginationEl: HTMLElement | null;
   let footerEl: HTMLElement | null;
+  let bodyEl: HTMLElement | null;
 
   async function calcTableHeight() {
     const { resizeHeightOffset, pagination, maxHeight } = unref(propsRef);
@@ -68,6 +69,7 @@ export function useTableScroll(
     if (!tableEl) return;
 
     const headEl = tableEl.querySelector('.ant-table-thead ');
+
     if (!headEl) return;
 
     // Table height from bottom
@@ -117,6 +119,11 @@ export function useTableScroll(
 
     height = (height > maxHeight! ? (maxHeight as number) : height) ?? height;
     setHeight(height);
+
+    if (!bodyEl) {
+      bodyEl = tableEl.querySelector('.ant-table-body');
+    }
+    bodyEl!.style.height = `${height}px`;
   }
 
   useWindowSizeFn(calcTableHeight, 200);

diff --git a/src/components/Table/src/style/index.less b/src/components/Table/src/style/index.less
@@ -4,12 +4,11 @@
 
 .@{prefix-cls} {
   &-form-container {
-    width: 100%;
     padding: 16px;
 
     .ant-form {
-      padding: 16px 16px 6px 12px;
-      margin-bottom: 18px;
+      padding: 12px 10px 6px 10px;
+      margin-bottom: 16px;
       background: #fff;
       border-radius: 4px;
     }
@@ -74,103 +73,17 @@
     }
   }
 
-  // .ant-table-bordered .ant-table-header > table,
-  // .ant-table-bordered .ant-table-body > table,
-  // .ant-table-bordered .ant-table-fixed-left table,
-  // .ant-table-bordered .ant-table-fixed-right table {
-  //   border: 1px solid @border-color !important;
-  // }
-
-  // .ant-table-thead {
-  //   tr {
-  //     border: none;
-  //   }
-
-  //   th {
-  //     border: none;
-  //   }
-  // }
-
-  // .ant-table-bordered .ant-table-tbody > tr > td {
-  // border-bottom: 1px solid @border-color !important;
-
-  // &:last-child {
-  //   border-right: none !important;
-  // }
-  // }
-
-  // .ant-table.ant-table-bordered .ant-table-footer,
-  // .ant-table.ant-table-bordered .ant-table-title {
-  //   border: 1px solid @border-color !important;
-  // }
-
-  // .ant-table-bordered.ant-table-empty .ant-table-placeholder {
-  //   border: 1px solid @border-color !important;
-  // }
-
   .ant-table-tbody > tr > td,
   .ant-table-tbody > tr > th,
   .ant-table-thead > tr > td,
   .ant-table-thead > tr > th {
     white-space: pre;
   }
 
-  // .ant-table-row-cell-last {
-  //   border-right: none !important;
-  // }
-
-  // .ant-table-bordered .ant-table-thead > tr > th,
-  // .ant-table-bordered .ant-table-tbody > tr > td {
-  //   border-right: 1px solid @border-color !important;
-  // }
-
   .ant-pagination {
     margin: 10px 0 0 0;
   }
 
-  // .ant-table-body {
-  //   overflow-x: auto !important;
-  //   overflow-y: scroll !important;
-  // }
-
-  // .ant-table-header {
-  //   margin-bottom: 0 !important;
-  //   overflow-x: hidden !important;
-  //   overflow-y: scroll !important;
-  // }
-
-  // .ant-table-fixed-right {
-  //   right: -1px;
-
-  //   .ant-table-header {
-  //     border-left: 1px solid @border-color !important;
-
-  //     .ant-table-fixed {
-  //       border-bottom: none;
-
-  //       .ant-table-thead th {
-  //         background: rgb(241, 243, 244);
-  //       }
-  //     }
-  //   }
-  // }
-
-  // .ant-table-fixed-left {
-  //   .ant-table-header {
-  //     overflow-y: hidden !important;
-  //   }
-
-  // .ant-table-fixed {
-  //   border-bottom: none;
-  // }
-  // }
-
-  // .ant-table-bordered .ant-table-thead > tr:not(:last-child) > th,
-  // .ant-table-tbody > tr > td {
-  //   word-break: break-word;
-  //   // border-color: @border-color !important;
-  // }
-
   .ant-table-footer {
     padding: 0;
 

diff --git a/src/components/Tree/src/index.vue b/src/components/Tree/src/index.vue
@@ -1,10 +1,21 @@
 <script lang="tsx">
   import type { ReplaceFields, Keys, CheckKeys, TreeActionType, TreeItem } from './types';
 
-  import { defineComponent, reactive, computed, unref, ref, watchEffect, toRaw, watch } from 'vue';
-  import { Tree } from 'ant-design-vue';
+  import {
+    defineComponent,
+    reactive,
+    computed,
+    unref,
+    ref,
+    watchEffect,
+    toRaw,
+    watch,
+    CSSProperties,
+  } from 'vue';
+  import { Tree, Empty } from 'ant-design-vue';
   import { TreeIcon } from './TreeIcon';
   import TreeHeader from './TreeHeader.vue';
+  import { ScrollContainer } from '/@/components/Container';
   // import { DownOutlined } from '@ant-design/icons-vue';
 
   import { omit, get } from 'lodash-es';
@@ -95,6 +106,11 @@
             emit('update:value', rawVal);
           },
           onRightClick: handleRightClick,
+          // onSelect: (k, e) => {
+          //   setTimeout(() => {
+          //     emit('select', k, e);
+          //   }, 16);
+          // },
         };
         propsData = omit(propsData, 'treeData', 'class');
         return propsData;
@@ -104,6 +120,10 @@
         searchState.startSearch ? searchState.searchData : unref(treeDataRef)
       );
 
+      const getNotFound = computed((): boolean => {
+        return searchState.startSearch && searchState.searchData?.length === 0;
+      });
+
       const {
         deleteNodeByKey,
         insertNodeByKey,
@@ -178,10 +198,10 @@
           return;
         }
         searchState.startSearch = true;
+        const { title: titleField } = unref(getReplaceFields);
 
         searchState.searchData = filter(unref(treeDataRef), (node) => {
-          const { title } = node;
-          return title?.includes(searchValue) ?? false;
+          return node[titleField]?.includes(searchValue) ?? false;
         });
       }
 
@@ -284,7 +304,7 @@
                 title: () => (
                   <span
                     class={`${prefixCls}-title pl-2`}
-                    onClick={handleClickNode.bind(null, item.key, children)}
+                    onClick={handleClickNode.bind(null, item[keyField], item[childrenField])}
                   >
                     {icon && <TreeIcon icon={icon} />}
                     <span
@@ -304,9 +324,11 @@
       }
       return () => {
         const { title, helpMessage, toolbar, search } = props;
+        const showTitle = title || toolbar || search;
+        const scrollStyle: CSSProperties = { height: 'calc(100% - 38px)' };
         return (
           <div class={[prefixCls, 'h-full bg-white', attrs.class]}>
-            {(title || toolbar || search) && (
+            {showTitle && (
               <TreeHeader
                 checkAll={checkAll}
                 expandAll={expandAll}
@@ -318,13 +340,17 @@
                 onSearch={handleSearch}
               />
             )}
-            <Tree {...unref(getBindValues)} showIcon={false}>
-              {{
-                // switcherIcon: () => <DownOutlined />,
-                default: () => renderTreeNode({ data: unref(getTreeData), level: 1 }),
-                ...extendSlots(slots),
-              }}
-            </Tree>
+            <ScrollContainer style={scrollStyle} v-show={!unref(getNotFound)}>
+              <Tree {...unref(getBindValues)} showIcon={false}>
+                {{
+                  // switcherIcon: () => <DownOutlined />,
+                  default: () => renderTreeNode({ data: unref(getTreeData), level: 1 }),
+                  ...extendSlots(slots),
+                }}
+              </Tree>
+            </ScrollContainer>
+
+            <Empty v-show={unref(getNotFound)} class="!mt-4" />
           </div>
         );
       };