1

src/shared/components/DataTable.test.ts

@@ -6,8 +6,8 @@ import LayoutPreferenceList from './LayoutPreferenceList.vue'
 import { UI_PREFERENCE_SCOPE, preferenceStorageKey } from '@/shared/utils/uiLayoutPreference'
 
 const TableStub = defineComponent({
-  props: { border: Boolean, stripe: Boolean },
-  template: '<div class="table-stub" :data-border="String(border)" :data-stripe="String(stripe)"><slot /></div>',
+  props: { border: Boolean, stripe: Boolean, maxHeight: [String, Number] },
+  template: '<div class="table-stub" :data-border="String(border)" :data-stripe="String(stripe)" :data-max-height="String(maxHeight)"><slot /></div>',
   methods: { doLayout() {} },
 })
 const ColumnStub = defineComponent({
@@ -93,6 +93,20 @@ describe('DataTable column preferences', () => {
     expect(plainTable.get('.table-stub').attributes()).toMatchObject({ 'data-border': 'false', 'data-stripe': 'false' })
   })
 
+  it('keeps table bodies within the viewport by default and allows a custom height', () => {
+    const defaultTable = mountTable()
+    expect(defaultTable.get('.table-stub').attributes('data-max-height')).toBe('calc(100vh - 300px)')
+
+    const customTable = shallowMount(DataTable, {
+      props: { data: [], columns: configurableColumns, maxHeight: 420 },
+      global: {
+        stubs: { ElTable: TableStub, ElTableColumn: ColumnStub, ElButton: ButtonStub, ElPopover: PopoverStub },
+        directives: { loading: {} },
+      },
+    })
+    expect(customTable.get('.table-stub').attributes('data-max-height')).toBe('420')
+  })
+
   it('uses key as the data property for ordinary columns only', () => {
     const wrapper = shallowMount(DataTable, {
       props: {

src/shared/components/DataTable.vue

@@ -62,6 +62,7 @@ const props = withDefaults(defineProps<{
   emptyText?: string
   total?: number
   pageSizes?: number[]
+  maxHeight?: string | number
   preferenceKey?: string
   columnSettingsMode?: 'auto' | 'show' | 'hide'
   border?: boolean
@@ -71,6 +72,7 @@ const props = withDefaults(defineProps<{
   emptyText: '暂无数据',
   total: undefined,
   pageSizes: () => [10, 20, 50, 100],
+  maxHeight: 'calc(100vh - 300px)',
   columnSettingsMode: 'auto',
   border: true,
   stripe: true,
@@ -298,7 +300,7 @@ function setPage(value: number) {
         </div>
       </div>
     </div>
-    <el-table ref="tableRef" v-bind="$attrs" v-loading="loading" :data="data" :empty-text="emptyText" :border="border" :stripe="stripe" :aria-busy="loading">
+    <el-table ref="tableRef" v-bind="$attrs" v-loading="loading" :data="data" :empty-text="emptyText" :border="border" :stripe="stripe" :max-height="maxHeight" :aria-busy="loading">
       <el-table-column
         v-for="(column, index) in visibleColumns"
         :key="columnRenderKey(column, index)"