fix: data-table max-height not working

CHANGELOG.en-US.md

@@ -2,6 +2,7 @@
 ## PENDING
 ### Refactors
 - Refactor `n-tag` styles
+- Fix the problem that `n-data-table`'s `max-height` style is broken. https://bugs.chromium.org/p/chromium/issues/detail?id=1107223
 
 ## 1.5.0 (2020-07-09)
 ### Breaking Changes

CHANGELOG.zh-CN.md

@@ -2,6 +2,7 @@
 ## PENDING
 ### Refactors
 - 重构了 `n-tag` 的样式
+- 修正了 `n-data-table` 的 `max-height` 样式失效的问题 https://bugs.chromium.org/p/chromium/issues/detail?id=1107223
 
 ## 1.5.0 (2020-07-09)
 ### Breaking Changes
@@ -11,7 +12,7 @@
 
 ## 1.4.1 (2020-06-23)
 ### Features
-- 为 `n-select`　增加了　`autofocus`　属性.
+- 为 `n-select` 增加了 `autofocus` 属性
 
 ## 1.4.0 (2020-06-19)
 ### Breaking Changes

src/DataTable/src/BaseTable.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="n-data-table-base-table" :style="bodyStyle">
+  <div class="n-data-table-base-table">
     <table-header
       ref="header"
       :placement="placement"
@@ -11,6 +11,7 @@
     />
     <table-body
       ref="body"
+      :style="bodyStyle"
       :main="main"
       :placement="placement"
       :scroll-x="scrollX"
@@ -27,6 +28,8 @@
 <script>
 import TableHeader from './TableParts/Header'
 import TableBody from './TableParts/Body'
+import resizeObserverDelegate from '../../_utils/delegate/resizeObserverDelegate'
+import formatLength from '../../_utils/css/formatLength'
 
 export default {
   components: {
@@ -67,9 +70,13 @@ export default {
       type: Number,
       default: 0
     },
-    bodyStyle: {
-      type: Object,
-      default: () => ({})
+    maxHeight: {
+      type: Number,
+      default: null
+    },
+    minHeight: {
+      type: Number,
+      default: null
     },
     rowClassName: {
       type: [Function, String],
@@ -78,8 +85,39 @@ export default {
     loading: {
       type: Boolean,
       default: false
+    },
+    bordered: {
+      type: Boolean,
+      required: true
     }
   },
+  data () {
+    return {
+      bodyMaxHeight: null,
+      bodyMinHeight: null
+    }
+  },
+  computed: {
+    bodyStyle () {
+      return {
+        maxHeight: formatLength(this.bodyMaxHeight),
+        minHeight: formatLength(this.bodyMinHeight)
+      }
+    }
+  },
+  mounted () {
+    resizeObserverDelegate.registerHandler(
+      this.getHeaderElement(),
+      this.setBodyMinMaxHeight
+    )
+    this.setBodyMinMaxHeight()
+  },
+  beforeDestroy () {
+    resizeObserverDelegate.unregisterHandler(
+      this.getHeaderElement(),
+      this.setBodyMinMaxHeight
+    )
+  },
   methods: {
     getHeaderElement () {
       return this.$refs.header.$el
@@ -90,6 +128,18 @@ export default {
     setActiveFixedColumn (leftActiveFixedColumn, rightActiveFixedColumn) {
       this.$refs.body.activeLeft = leftActiveFixedColumn
       this.$refs.body.activeRight = rightActiveFixedColumn
+    },
+    setBodyMinMaxHeight () {
+      const bordered = this.bordered
+      const headerHeight = this.getHeaderElement().offsetHeight
+      const maxHeight = this.maxHeight + (bordered ? -2 : 0)
+      const minHeight = this.minHeight + (bordered ? -2 : 0)
+      if (maxHeight !== null) {
+        this.bodyMaxHeight = maxHeight - headerHeight
+      }
+      if (minHeight !== null) {
+        this.bodyMinHeight = minHeight - headerHeight
+      }
     }
   }
 }

src/DataTable/src/DataTable.vue

@@ -7,7 +7,6 @@
       'n-data-table--single-line': singleLine,
       'n-data-table--single-column': singleColumn,
       [`n-data-table--${size}-size`]: true,
-      'n-data-table--has-max-height': maxHeight !== null
     }"
   >
     <n-spin
@@ -21,11 +20,13 @@
           ref="mainTable"
           main
           :scroll-x="styleScrollX"
-          :body-style="bodyStyle"
+          :max-height="maxHeight"
+          :min-height="minHeight"
           :data="paginatedData"
           :columns="normalizedColumns"
           :row-class-name="rowClassName"
           :loading="loading"
+          :bordered="bordered"
         >
           <div
             v-if="paginatedData.length === 0"
@@ -433,14 +434,6 @@ export default {
       const startIndex = (this.internalCurrentPage - 1) * pageSize
       return this.sortedData.slice(startIndex, startIndex + pageSize)
     },
-    bodyStyle () {
-      /** if bordered, minus border width of table */
-      const offset = this.bordered ? -2 : 0
-      return {
-        maxHeight: formatLength(this.maxHeight, 1, offset),
-        minHeight: formatLength(this.minHeight, 1, offset)
-      }
-    },
     countOfCurrentPageCheckedRows () {
       const checkedRowKeys = this.syntheticCheckedRowKeys
       const rowKey = this.rowKey

src/_styles/DataTable.scss

@@ -307,15 +307,6 @@
         }
       }
     }
-    @include m(has-max-height) {
-      @include b(data-table-base-table) {
-        @include b(scrollbar) {
-          overflow: hidden;
-          max-height: stretch;
-          max-height: -webkit-fill-available;
-        }
-      }
-    }
     @include b(data-table-base-table) {
       display: flex;
       flex-direction: column;