fix(comp: table): update style with empty data (#888)

IDuxFE · May 6, 2022 · 44c67aa · 44c67aa
1 parent a400cba
commit 44c67aa
Show file tree

Hide file tree

Showing 10 changed files with 25 additions and 20 deletions.
diff --git a/packages/components/_private/selector/style/index.less b/packages/components/_private/selector/style/index.less
@@ -24,6 +24,8 @@
   }
 
   &-item {
+    .ellipsis();
+
     user-select: none;
 
     &-label {

diff --git a/packages/components/menu/docs/Index.zh.md b/packages/components/menu/docs/Index.zh.md
@@ -19,7 +19,7 @@ order: 0
 | `collapsed` | 菜单收起状态 | `boolean` | `false` | - | - |
 | `customAdditional` | 自定义下拉选项的额外属性 | `MenuCustomAdditional` | - | - | 例如 `class`, 或者原生事件 |
 | `dataSource` | 菜单数据数组 | `MenuData[]` | - | - | 优先级高于 `default` 插槽 |
-| `getKey` | 获取数据的唯一标识 | `string \| (data: CascaderData) => VKey` | `key` | ✅ | - |
+| `getKey` | 获取数据的唯一标识 | `string \| (data: MenuData) => VKey` | `key` | ✅ | - |
 | `indent` | `inline` 模式时的菜单缩进宽度 | `string \| number` | `24` | ✅ | 仅支持 `inline` 模式 |
 | `mode` | 菜单模式，现在支持垂直、水平和内嵌 | `'vertical' \| 'horizontal' \| 'inline'` | `'vertical'` | - | - |
 | `multiple` | 是否支持多选 | `boolean` | `false` | - | - |

diff --git a/packages/components/switch/style/mixin.less b/packages/components/switch/style/mixin.less
@@ -8,7 +8,6 @@
   }
 
   .@{switch-prefix} {
-
     &-loading-icon {
       font-size: @icon-size;
       right: calc(100% - @box-size + @icon-padding);
@@ -21,21 +20,20 @@
   }
 
   &.@{switch-prefix}-checked {
-
     &::after {
       width: @box-size;
       height: @box-size;
       left: calc(100% - @box-size - @box-padding);
     }
 
     .@{switch-prefix} {
-
       &-loading-icon {
         left: calc(100% - @box-size + @icon-padding);
       }
 
       &-label {
         padding-left: @label-padding;
+        padding-right: @box-size + @label-padding;
       }
     }
   }

diff --git a/packages/components/table/__tests__/__snapshots__/table.spec.ts.snap b/packages/components/table/__tests__/__snapshots__/table.spec.ts.snap
@@ -6,7 +6,7 @@ exports[`Table > basic work > render work 1`] = `
   <!---->
   <div class=\\"ix-table-container\\">
     <div class=\\"ix-table-content\\">
-      <table style=\\"table-layout: auto; height: 100%;\\">
+      <table style=\\"table-layout: auto;\\">
         <colgroup>
           <col class=\\"ix-table-col-expandable\\">
           <col class=\\"ix-table-col-selectable\\">

diff --git a/packages/components/table/demo/Selectable.vue b/packages/components/table/demo/Selectable.vue
@@ -1,7 +1,6 @@
 <template>
   <IxSpace>
-    <IxSwitch v-model:checked="selectableColumn.multiple" checkedChildren="Checkbox" unCheckedChildren="Radio">
-    </IxSwitch>
+    <IxSwitch v-model:checked="selectableColumn.multiple" :labels="['Checkbox', 'Radio']"></IxSwitch>
     <IxRadioGroup v-model:value="selectableColumn.trigger">
       <IxRadio value="click">Click</IxRadio>
       <IxRadio value="dblclick">DblClick</IxRadio>

diff --git a/packages/components/table/src/Table.tsx b/packages/components/table/src/Table.tsx
@@ -85,13 +85,17 @@ export default defineComponent({
     provide(TABLE_TOKEN, context)
     expose({ scrollTo: scrollContext.scrollTo })
 
+    const { flattedData, filteredData } = dataContext
+
     const classes = computed(() => {
       const prefixCls = mergedPrefixCls.value
-      const { borderless = config.borderless, size = config.size } = props
+      const { borderless = config.borderless, size = config.size, scroll } = props
       return normalizeClass({
         [prefixCls]: true,
         [`${prefixCls}-auto-height`]: autoHeight.value,
         [`${prefixCls}-borderless`]: borderless,
+        [`${prefixCls}-empty`]: flattedData.value.length === 0,
+        [`${prefixCls}-full-height`]: scroll?.fullHeight,
         [`${prefixCls}-${size}`]: true,
       })
     })
@@ -100,11 +104,7 @@ export default defineComponent({
       const prefixCls = mergedPrefixCls.value
       const header = <ɵHeader v-slots={slots} header={props.header} />
       const footer = renderFooter(slots, prefixCls)
-      const [paginationTop, paginationBottom] = renderPagination(
-        mergedPagination.value,
-        dataContext.filteredData.value,
-        prefixCls,
-      )
+      const [paginationTop, paginationBottom] = renderPagination(mergedPagination.value, filteredData.value, prefixCls)
       const children = [header, paginationTop, <MainTable />, paginationBottom, footer]
       const spinProps = convertSpinProps(props.spin)
       const spinWrapper = spinProps ? <IxSpin {...spinProps}>{children}</IxSpin> : children

diff --git a/packages/components/table/src/main/MainTable.tsx b/packages/components/table/src/main/MainTable.tsx
@@ -119,7 +119,7 @@ export default defineComponent({
       const width = scrollWidth.value
       const height = scrollHeight.value
       const overflowX = width ? 'auto' : undefined
-      const overflowY = props.virtual ? 'hidden' : height ? 'auto' : width ? 'hidden' : undefined
+      const overflowY = props.virtual ? 'hidden' : height ? 'scroll' : width ? 'hidden' : undefined
       const fullHeight = props.scroll?.fullHeight
       return { overflowX, overflowY, [fullHeight ? 'height' : 'maxHeight']: height }
     })
@@ -129,7 +129,6 @@ export default defineComponent({
         tableLayout: tableLayout.value,
         width: scrollWidth.value,
         minWidth: scrollWidth.value ? '100%' : undefined,
-        height: '100%',
       }
     })
 

diff --git a/packages/components/table/src/main/body/Body.tsx b/packages/components/table/src/main/body/Body.tsx
@@ -28,9 +28,7 @@ export default defineComponent({
       isSticky,
     } = inject(TABLE_TOKEN)!
 
-    const showMeasure = computed(
-      () => flattedData.value.length > 0 && (scrollWidth.value || scrollHeight.value || isSticky.value),
-    )
+    const showMeasure = computed(() => scrollWidth.value || scrollHeight.value || isSticky.value)
 
     return () => {
       const prefixCls = mergedPrefixCls.value

diff --git a/packages/components/table/style/index.less b/packages/components/table/style/index.less
@@ -307,6 +307,15 @@
     }
   }
 
+  &-empty&-auto-height,
+  &-empty&-full-height {
+    .cdk-virtual-scroll-filler,
+    .cdk-virtual-scroll-content,
+    table {
+      height: 100%;
+    }
+  }
+
   &-sticky {
     &-holder {
       position: sticky;

diff --git a/packages/pro/transfer/__tests__/__snapshots__/proTransfer.spec.ts.snap b/packages/pro/transfer/__tests__/__snapshots__/proTransfer.spec.ts.snap
@@ -50,7 +50,7 @@ exports[`ProTransfer > table transfer render work 1`] = `
                 class="ix-table-content"
               >
                 <table
-                  style="table-layout: auto; height: 100%;"
+                  style="table-layout: auto;"
                 >
                   <colgroup>
                     
@@ -1033,7 +1033,7 @@ exports[`ProTransfer > table transfer render work 1`] = `
                 class="ix-table-content"
               >
                 <table
-                  style="table-layout: auto; height: 100%;"
+                  style="table-layout: auto;"
                 >
                   <colgroup>