fix(data-table): flex-height not working without scroll-x, closes #952

tusen-ai · Aug 25, 2021 · 9715021 · 9715021
1 parent ed73168
commit 9715021
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 8 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -10,10 +10,11 @@
 
 ### Fixes
 
-- Fix `n-image` not initializing `rorate` after switching images, closes [#921](https://github.com/TuSimple/naive-ui/issues/921).
+- Fix `n-image` not initializing `rotate` after switching images, closes [#921](https://github.com/TuSimple/naive-ui/issues/921).
 - Fix `n-data-table`'s loading is not centered, closes [#929](https://github.com/TuSimple/naive-ui/issues/929).
 - Fix `n-tree` throws an exception when onLoad callback does not add children, closes [#772](https://github.com/TuSimple/naive-ui/issues/772).
 - Fix `n-input` will show placeholder and 0 simultaneously while passing `value=ref(0)` in n-input, closes [#914](https://github.com/TuSimple/naive-ui/issues/914).
+- Fix `n-data-table` `flex-height` not working without `scroll-x`, closes [#952](https://github.com/TuSimple/naive-ui/issues/952).
 
 ## 2.16.5 (2021-08-20)
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -10,10 +10,11 @@
 
 ### Fixes
 
-- 修复 `n-image` 切换图像后没有初始化 `rorate` 的问题，关闭 [#921](https://github.com/TuSimple/naive-ui/issues/921)
-- 修复 `n-data-table`的 loading 不在中间，关闭 [#929](https://github.com/TuSimple/naive-ui/issues/929)
+- 修复 `n-image` 切换图像后没有初始化 `rotate` 的问题，关闭 [#921](https://github.com/TuSimple/naive-ui/issues/921)
+- 修复 `n-data-table` 的 loading 不在中间，关闭 [#929](https://github.com/TuSimple/naive-ui/issues/929)
 - 修复 `n-tree` 当 onLoad 回调没有添加 children 时抛出错误，关闭 [#772](https://github.com/TuSimple/naive-ui/issues/772)
 - 修复 `n-input` 当传递 `value=ref(0)` 时，同时显示 0 和占位符问题，关闭 [#914](https://github.com/TuSimple/naive-ui/issues/914)
+- 修复 `n-data-table` `flex-height` 在不设定 `scroll-x` 的时候不生效，关闭 [#952](https://github.com/TuSimple/naive-ui/issues/952)
 
 ## 2.16.5 (2021-08-20)
 

diff --git a/src/data-table/demos/zhCN/scroll-debug.demo.md b/src/data-table/demos/zhCN/scroll-debug.demo.md
@@ -1,6 +1,14 @@
 # Scroll Debug
 
 ```html
+Flex Height, Auto Layout Overflow, No Max Height
+<n-data-table
+  :columns="columns"
+  :data="data"
+  style="height: 180px;"
+  flex-height
+/>
+
 Auto Layout Overflow, No Max Height
 <n-data-table :columns="columns" :data="data" />
 

diff --git a/src/data-table/src/DataTable.tsx b/src/data-table/src/DataTable.tsx
@@ -21,7 +21,7 @@ import { PaginationProps } from '../../pagination/src/Pagination'
 import { warn, createKey } from '../../_utils'
 import type { MaybeArray, ExtractPublicPropTypes } from '../../_utils'
 import { dataTableLight, DataTableTheme } from '../styles'
-import NMainTable from './MainTable'
+import MainTable from './MainTable'
 import { useCheck } from './use-check'
 import { useTableData } from './use-table-data'
 import { useScroll } from './use-scroll'
@@ -508,7 +508,7 @@ export default defineComponent({
         style={this.cssVars as CSSProperties}
       >
         <div class={`${mergedClsPrefix}-data-table-wrapper`}>
-          <NMainTable ref="mainTableInstRef">
+          <MainTable ref="mainTableInstRef">
             {{
               default: () =>
                 this.paginatedData.length === 0 ? (
@@ -530,7 +530,7 @@ export default defineComponent({
                   </div>
                 ) : null
             }}
-          </NMainTable>
+          </MainTable>
         </div>
         {this.pagination ? (
           <div class={`${mergedClsPrefix}-data-table__pagination`}>

diff --git a/src/data-table/src/MainTable.tsx b/src/data-table/src/MainTable.tsx
@@ -105,6 +105,7 @@ export default defineComponent({
           ref="bodyInstRef"
           style={this.bodyStyle}
           showHeader={headerInBody}
+          flexHeight={flexHeight}
           onResize={this.handleBodyResize}
         />
         {renderSlot(this.$slots, 'default')}

diff --git a/src/data-table/src/TableParts/Body.tsx b/src/data-table/src/TableParts/Body.tsx
@@ -97,7 +97,8 @@ export default defineComponent({
   name: 'DataTableBody',
   props: {
     onResize: Function as PropType<(e: ResizeObserverEntry) => void>,
-    showHeader: Boolean
+    showHeader: Boolean,
+    flexHeight: Boolean
   },
   setup (props) {
     const {
@@ -287,10 +288,12 @@ export default defineComponent({
       virtualScroll,
       maxHeight,
       mergedTableLayout,
+      flexHeight,
       onResize,
       setHeaderScrollLeft
     } = this
-    const scrollable = scrollX !== undefined || maxHeight !== undefined
+    const scrollable =
+      scrollX !== undefined || maxHeight !== undefined || flexHeight
 
     // For a basic table with auto layout whose content may overflow we will
     // make it scrollable, which differs from browser's native behavior.