IDuxFE · danranVm · Mar 22, 2022 · Mar 22, 2022
diff --git a/packages/components/config/src/defaultConfig.ts b/packages/components/config/src/defaultConfig.ts
@@ -245,6 +245,7 @@ export const defaultConfig: GlobalConfig = {
     size: 'md',
   },
   table: {
+    autoHeight: false,
     borderless: true,
     rowKey: 'key',
     size: 'md',

diff --git a/packages/components/config/src/types.ts b/packages/components/config/src/types.ts
@@ -391,6 +391,7 @@ export interface StepperConfig {
 }
 
 export interface TableConfig {
+  autoHeight: boolean
   borderless: boolean
   rowKey: string
   size: TableSize

diff --git a/packages/components/table/__tests__/table.spec.ts b/packages/components/table/__tests__/table.spec.ts
@@ -158,6 +158,16 @@ describe('Table', () => {
       expect(onUpdateSelectedRowKeys).toBeCalledWith([2])
     })
 
+    test('autoHeight work', async () => {
+      const wrapper = TableMount({ props: { autoHeight: true } })
+
+      expect(wrapper.classes()).toContain('ix-table-auto-height')
+
+      await wrapper.setProps({ autoHeight: false })
+
+      expect(wrapper.classes()).not.toContain('ix-table-auto-height')
+    })
+
     test('borderless work', async () => {
       const wrapper = TableMount({ props: { borderless: true } })
 

diff --git a/packages/components/table/demo/AutoHeight.md b/packages/components/table/demo/AutoHeight.md
@@ -0,0 +1,14 @@
+---
+title:
+  zh: 自动高度
+  en: Auto height
+order: 55
+---
+
+## zh
+
+你可以通过设置 `autoHeight` 让表格自适应容器的高度。
+
+## en
+
+You can adjust the table to the container height by setting `autoHeight`.
diff --git a/packages/components/table/demo/AutoHeight.vue b/packages/components/table/demo/AutoHeight.vue
@@ -0,0 +1,110 @@
+<template>
+  <IxInputNumber v-model:value="containerHeight" :min="200" :max="600" :step="100"></IxInputNumber>
+  <div :style="{ height: `${containerHeight}px` }">
+    <IxTable :columns="columns" :dataSource="data" autoHeight :scroll="scroll">
+      <template #name="{ value }">
+        <a>{{ value }}</a>
+      </template>
+      <template #action>
+        <a>action</a>
+      </template>
+    </IxTable>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+import { TableColumn, TableScroll } from '@idux/components/table'
+
+const containerHeight = ref(300)
+
+interface Data {
+  key: number
+  name: string
+  age: number
+  address: string
+}
+
+const columns: TableColumn<Data>[] = [
+  {
+    title: 'Name',
+    dataKey: 'name',
+    width: 100,
+    fixed: 'start',
+    customCell: 'name',
+  },
+  {
+    title: 'Age',
+    dataKey: 'age',
+    width: 100,
+    fixed: 'start',
+  },
+  {
+    title: 'Column 1',
+    dataKey: 'address',
+    width: 150,
+    key: 'Column 1',
+  },
+  {
+    title: 'Column 2',
+    dataKey: 'address',
+    width: 150,
+    key: 'Column 2',
+  },
+  {
+    title: 'Column 3',
+    dataKey: 'address',
+    width: 150,
+    key: 'Column 3',
+  },
+  {
+    title: 'Column 4',
+    dataKey: 'address',
+    width: 150,
+    key: 'Column 4',
+  },
+  {
+    title: 'Column 5',
+    dataKey: 'address',
+    width: 150,
+    key: 'Column 5',
+  },
+  {
+    title: 'Column 6',
+    dataKey: 'address',
+    width: 150,
+    key: 'Column 6',
+  },
+  {
+    title: 'Column 7',
+    dataKey: 'address',
+    width: 150,
+    key: 'Column 7',
+  },
+  {
+    title: 'Column 8',
+    dataKey: 'address',
+    key: 'Column 8',
+  },
+  {
+    title: 'Action',
+    key: 'action',
+    fixed: 'end',
+    width: 100,
+    customCell: 'action',
+  },
+]
+
+const data: Data[] = []
+for (let i = 0; i < 100; i++) {
+  data.push({
+    key: i,
+    name: `Edrward ${i}`,
+    age: 32,
+    address: `London Park no. ${i}`,
+  })
+}
+
+const scroll: TableScroll = { width: 1500 }
+</script>
diff --git a/packages/components/table/docs/Index.zh.md b/packages/components/table/docs/Index.zh.md
@@ -16,7 +16,8 @@ order: 0
 | --- | --- | --- | --- | --- | --- |
 | `v-model:expandedRowKeys` | 展开行的 `key` 数组 | `(string \| number)[]` | - | - | - |
 | `v-model:selectedRowKeys` | 选中行的 `key` 数组 | `(string \| number)[]` | - | - | - |
-| `borderless` | 是否无边框 | `boolean` | `false` | ✅ | - |
+| `autoHeight` | 是否自适应高度 | `boolean` | `false` | ✅ | - |
+| `borderless` | 是否无边框 | `boolean` | `true` | ✅ | - |
 | `childrenKey` | 指定树形结构的 `key` | `string` | `children` | - | - |
 | `columns` | 表格列的配置描述, 参见[TableColumn](#TableColumn) | `TableColumn[]` | - | - | - |
 | `dataSource` | 表格数据数组 | `object[]` | - | - | - |

diff --git a/packages/components/table/src/Table.tsx b/packages/components/table/src/Table.tsx
@@ -42,10 +42,11 @@ export default defineComponent({
     const locale = useGlobalConfig('locale')
     const config = useGlobalConfig('table')
 
+    const autoHeight = computed(() => props.autoHeight ?? config.autoHeight)
     const tags = useTags(props)
     const getRowKey = useGetRowKey(props, config)
     const stickyContext = useSticky(props)
-    const scrollContext = useScroll(props, stickyContext)
+    const scrollContext = useScroll(props, autoHeight, stickyContext)
     const columnsContext = useColumns(props, slots, config, scrollContext.scrollBarSizeOnFixedHolder)
     const sortableContext = useSortable(columnsContext.flattedColumns)
     const filterableContext = useFilterable(columnsContext.flattedColumns)
@@ -91,6 +92,7 @@ export default defineComponent({
       const { borderless = config.borderless, size = config.size } = props
       return normalizeClass({
         [prefixCls]: true,
+        [`${prefixCls}-auto-height`]: autoHeight.value,
         [`${prefixCls}-borderless`]: borderless,
         [`${prefixCls}-${size}`]: true,
       })

diff --git a/packages/components/table/src/composables/useScroll.ts b/packages/components/table/src/composables/useScroll.ts
@@ -13,7 +13,11 @@ import { Logger, convertCssPixel, convertElement } from '@idux/cdk/utils'
 import { type TableProps } from '../types'
 import { type StickyContext } from './useSticky'
 
-export function useScroll(props: TableProps, { isSticky, stickyScrollLeft }: StickyContext): ScrollContext {
+export function useScroll(
+  props: TableProps,
+  autoHeight: ComputedRef<boolean>,
+  { isSticky, stickyScrollLeft }: StickyContext,
+): ScrollContext {
   const { scrollHeadRef, scrollBodyRef, scrollFootRef, handleScroll, pingedStart, pingedEnd } =
     useScrollRef(stickyScrollLeft)
 
@@ -26,7 +30,9 @@ export function useScroll(props: TableProps, { isSticky, stickyScrollLeft }: Sti
     Logger.warn('components/table', '`scroll.y` was deprecated, please use `scroll.height` instead')
 
   const scrollWidth = computed(() => convertCssPixel(props.scroll?.width || props.scroll?.x))
-  const scrollHeight = computed(() => convertCssPixel(props.scroll?.height || props.scroll?.y))
+  const scrollHeight = computed(() =>
+    convertCssPixel(props.scroll?.height || props.scroll?.y) || autoHeight.value ? 'auto' : '',
+  )
 
   const scrollBarSize = computed(() => (props.virtual ? 0 : getScrollBarSize(convertElement(scrollBodyRef))))
   const scrollBarSizeOnFixedHolder = computed(() => (isSticky.value ? 0 : scrollHeight.value ? scrollBarSize.value : 0))

diff --git a/packages/components/table/src/main/FixedHolder.tsx b/packages/components/table/src/main/FixedHolder.tsx
@@ -5,9 +5,7 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
-import type { Ref, StyleValue } from 'vue'
-
-import { computed, defineComponent, inject, onBeforeUnmount, onMounted } from 'vue'
+import { type CSSProperties, type Ref, computed, defineComponent, inject, onBeforeUnmount, onMounted } from 'vue'
 
 import { off, on } from '@idux/cdk/utils'
 
@@ -38,7 +36,7 @@ export default defineComponent({
         [`${prefixCls}-sticky-holder`]: isSticky.value,
       }
     })
-    const style = computed<StyleValue>(() => {
+    const style = computed<CSSProperties>(() => {
       const sticky = isSticky.value
       const { offsetHead, offsetFoot } = mergedSticky.value
       return {
@@ -48,7 +46,7 @@ export default defineComponent({
       }
     })
 
-    const tableStyle = computed<StyleValue>(() => {
+    const tableStyle = computed<CSSProperties>(() => {
       const visibility = hasData.value && !columnWidths.value.length ? 'hidden' : undefined
       return {
         tableLayout: 'fixed',

diff --git a/packages/components/table/src/types.ts b/packages/components/table/src/types.ts
@@ -24,6 +24,7 @@ import { type FlattedData } from './composables/useDataSource'
 export const tableProps = {
   expandedRowKeys: IxPropTypes.array<VKey>(),
   selectedRowKeys: IxPropTypes.array<VKey>(),
+  autoHeight: IxPropTypes.bool,
   borderless: IxPropTypes.bool,
   childrenKey: IxPropTypes.string.def('children'),
   columns: IxPropTypes.array<TableColumn<any>>().def(() => []),

diff --git a/packages/components/table/style/index.less b/packages/components/table/style/index.less
@@ -265,4 +265,61 @@
       flex: auto;
     }
   }
+
+  &-auto-height {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+    .@{table-prefix} {
+      &-container {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+      }
+
+      &-content {
+        flex-basis: 0;
+        flex-grow: 1;
+      }
+
+      &-fixed-holder {
+        flex-shrink: 0;
+      }
+    }
+  }
+
+  &-sticky {
+    &-holder {
+      position: sticky;
+      z-index: 3;
+      background-color: @background-color-component;
+    }
+
+    &-scroll {
+      position: sticky;
+      bottom: 0;
+      z-index: 3;
+      display: flex;
+      align-items: center;
+      background: lighten(@border-color, 80%);
+      border-top: 1px solid @border-color;
+      opacity: 0.6;
+
+      &:hover {
+        transform-origin: center bottom;
+      }
+
+      &-bar {
+        height: 8px;
+        background-color: @table-sticky-scroll-bar-background;
+        border-radius: @table-sticky-scroll-bar-radius;
+
+        &:hover,
+        &-active {
+          background-color: fade(@table-sticky-scroll-bar-background, 80%);
+        }
+      }
+    }
+  }
 }
diff --git a/packages/components/table/style/themes/default.variable.less b/packages/components/table/style/themes/default.variable.less
@@ -42,3 +42,6 @@
 
 @table-expandable-icon-size: @font-size-md;
 @table-expandable-icon-color: @color-black;
+
+@table-sticky-scroll-bar-background: fade(#000, 35%);
+@table-sticky-scroll-bar-radius: 4px;