refactor(data-table): max-height & min-height will be apply to the whole table part

src/DataTable/src/BaseTable.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="n-data-table-base-table">
+  <div class="n-data-table-base-table" :style="bodyStyle">
     <table-header
       ref="header"
       :placement="placement"
@@ -13,12 +13,10 @@
       ref="body"
       :main="main"
       :placement="placement"
-      :body-style="bodyStyle"
       :scroll-x="scrollX"
       :data="data"
       :columns="columns"
       :row-class-name="rowClassName"
-      :min-height="bodyMinHeight"
       :loading="loading"
       :fixed="fixed"
     />
@@ -53,10 +51,6 @@ export default {
       type: [Number, String],
       default: null
     },
-    bodyMinHeight: {
-      type: Number,
-      default: null
-    },
     columns: {
       type: Array,
       default: () => []

src/DataTable/src/DataTable.vue

@@ -25,20 +25,17 @@
           :columns="normalizedColumns"
           :row-class-name="rowClassName"
           :loading="loading"
-          :body-min-height="42"
         >
-          <slot name="append" />
+          <div
+            v-if="paginatedData.length === 0"
+            class="n-data-table-empty"
+            :class="{
+              'n-data-table-empty--hide': loading
+            }"
+          >
+            <n-empty :theme="syntheticTheme" />
+          </div>
         </base-table>
-        <div
-          v-if="paginatedData.length === 0"
-          class="n-data-table__empty"
-          :class="{
-            'n-data-table__empty--hide': loading
-          }"
-          :style="bodyStyle"
-        >
-          <n-empty :theme="syntheticTheme" />
-        </div>
       </div>
       <div
         v-if="pagination"
@@ -105,6 +102,7 @@ function normalizeColumn (column) {
     filterOptionValues: undefined, // controlled
     filterOptionValue: undefined, // controlled
     filterMode: 'or',
+
     /** it is undefined due to compatibility */
     defaultFilterOptionValues: undefined,
     defaultFilterOptionValue: null,
@@ -435,9 +433,11 @@ export default {
       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),
-        minHeight: formatLength(this.minHeight)
+        maxHeight: formatLength(this.maxHeight, 1, offset),
+        minHeight: formatLength(this.minHeight, 1, offset)
       }
     },
     countOfCurrentPageCheckedRows () {

src/DataTable/src/TableParts/Body.vue

@@ -3,9 +3,8 @@
     ref="scrollbar"
     class="n-data-table-base-table-body"
     :theme="NDataTable.syntheticTheme"
-    :style="style"
     :content-style="{
-      minWidth: scrollX
+      minWidth: formatedScrollX
     }"
     :horizontal-rail-style="{ zIndex: 3 }"
     :vertical-rail-style="{ zIndex: 3 }"
@@ -74,6 +73,7 @@
 import cell from './Cell.vue'
 import { createCustomWidthStyle, setCheckStatusOfRow, createClassObject, createRowKey } from '../utils'
 import NScrollbar from '../../../Scrollbar'
+import formatLength from '../../../_utils/css/formatLength'
 
 export default {
   components: {
@@ -106,10 +106,6 @@ export default {
       type: Number,
       default: null
     },
-    bodyStyle: {
-      type: Object,
-      default: () => ({})
-    },
     data: {
       type: Array,
       default: () => []
@@ -134,6 +130,9 @@ export default {
     }
   },
   computed: {
+    formatedScrollX () {
+      return formatLength(this.scrollX)
+    },
     rowKey () {
       return this.NDataTable.rowKey
     },
@@ -145,16 +144,6 @@ export default {
     },
     checkedRowKeys () {
       return this.NDataTable.syntheticCheckedRowKeys
-    },
-    style () {
-      if (this.fixed && this.height) {
-        return Object.assign({}, this.bodyStyle, {
-          height: this.height + 'px',
-          minHeight: this.minHeight + 'px'
-        })
-      } else {
-        return this.bodyStyle
-      }
     }
   },
   methods: {

src/_utils/css/formatLength.js

@@ -1,15 +1,15 @@
 const pureNumberRegex = /^(\d|\.)+$/
 const numberRegex = /(\d|\.)+/
 
-export default function formatLength (length, weight = 1) {
-  if (typeof length === 'number') return '' + (length && (length * weight) + 'px')
+export default function formatLength (length, weight = 1, offset = 0) {
+  if (typeof length === 'number') return '' + ((length + offset) && ((length + offset) * weight) + 'px')
   if (typeof length === 'string') {
     if (pureNumberRegex.test(length)) {
-      return (length * weight) + 'px'
+      return ((length + offset) * weight) + 'px'
     } else {
       const result = numberRegex.exec(length)
       if (!result) return length
-      return length.replace(numberRegex, '' + Number(result[0]) * weight)
+      return length.replace(numberRegex, '' + (Number(result[0]) + offset) * weight)
     }
   }
   return length

styles/DataTable.scss

@@ -37,8 +37,10 @@
       width: 100%;
       font-size: 14px;
       padding-bottom: 8px;
-      @include e(empty) {
-        height: 108px;
+      @include b(data-table-empty) {
+        margin: 16px 0 14px 0;
+        flex-grow: 1;
+        flex-shrink: 0;
         opacity: 1;
         display: flex;
         align-items: center;
@@ -297,11 +299,20 @@
         }
       }
     }
-    @include b(scrollbar-content) {
-      overflow: visible;
+    @include b(data-table-base-table) {
+      display: flex;
+      flex-direction: column;
+      @include b(scrollbar) {
+        overflow: hidden;
+        max-height: -webkit-fill-available;
+        @include b(scrollbar-content) {
+          overflow: visible;
+        }
+      }
     }
     @include b(data-table-base-table-header) {
       @include once {
+        flex-shrink: 0;
         transition: border-color .3s $--n-ease-in-out-cubic-bezier;
         &::-webkit-scrollbar {
           width: 0;