Table: height accepts more units (#16013)

* Table: height accepts more units

* fix and update docs

* update

examples/docs/en-US/table.md

@@ -1810,7 +1810,7 @@ You can customize row index in `type=index` columns.
 |----------------|----------------------|-----------|-----------------------|----------|
 | data | Table data | array | — | — |
 | height | Table's height. By default it has an `auto` height. If its value is a number, the height is measured in pixels; if its value is a string, the value will be assigned to element's style.height, the height is affected by external styles | string/number | — | — |
-| max-height | Table's max-height. The height of the table starts from `auto` until it reaches the maxHeight limit. The `maxHeight` is measured in pixels, same as `height` | string/number | — | — |
+| max-height | Table's max-height. The legal value is a number or the height in px. | string/number | — | — |
 | stripe | whether Table is striped | boolean | — | false |
 | border | whether Table has vertical border | boolean | — | false |
 | size | size of Table | string | medium / small / mini | — |

examples/docs/es/table.md

@@ -1815,7 +1815,7 @@ Puede personalizar el índice de la fila con la propiedad `type=index` de las co
 | ---------------------- | ---------------------------------------- | ---------------------------------------- | ------------------------------ | ---------------------------------------- |
 | data                   | Datos de la tabla                        | array                                    | —                              | —                                        |
 | height                 | Altura de la tabla. Por defecto esta tiene un tamaño `auto`. Si este valor es un número, la altura es medido en pixeles; si este valor es una cadena, la altura es afectada por estilos externos. | string/number                            | —                              | —                                        |
-| max-height             | Altura máxima de la tabla. La altura de la tabla comienza desde `auto` hasta que alcanza la altura máxima. El `max-height` es medido en pixeles, lo mismo que `height` | string/number                            | —                              | —                                        |
+| max-height             | Table's max-height. The legal value is a number or the height in px.                | string/number                            | —                              | —                                        |
 | stripe                 | especifica si la tabla será en franjas   | boolean                                  | —                              | false                                    |
 | border                 | especifica si la tabla tiene bordes verticales | boolean                                  | —                              | false                                    |
 | size                   | tamaño de la tabla                       | string                                   | medium / small / mini          | —                                        |

examples/docs/fr-FR/table.md

@@ -1817,7 +1817,7 @@ Vous pouvez personnaliser les indices des colonnes de type `index`.
 |----------------|----------------------|-----------|-----------------------|----------|
 | data | Les données de la table. | array | — | — |
 | height | La hauteur de la table. Par défaut la hauteur est `auto`. Si sa valeur est un nombre, la hauteur est en px; si c'est un string, la valeur est assigné au style.height de l'élement. La hauteur est affectée par les styles externes. | string/number | — | — |
-| max-height | La hauteur maximale de la table. La hauteur commence à `auto` jusqu'à atteindre la limite. La `maxHeight` est en px. | string/number | — | — |
+| max-height | Table's max-height. The legal value is a number or the height in px. | string/number | — | — |
 | stripe | Si la table est rayée. | boolean | — | false |
 | border | Si la table à une bordure verticale. | boolean | — | false |
 | size | Taille de la table. | string | medium / small / mini | — |

examples/docs/zh-CN/table.md

@@ -1853,7 +1853,7 @@
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | data | 显示的数据 | array | — | — |
 | height | Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。  | string/number | — | — |
-| max-height | Table 的最大高度 | string/number | — | — |
+| max-height | Table 的最大高度。合法的值为数字或者单位为 px 的高度。 | string/number | — | — |
 | stripe | 是否为斑马纹 table | boolean | — | false |
 | border | 是否带有纵向边框 | boolean | — | false |
 | size | Table 的尺寸 | string | medium / small / mini | — |

packages/table/src/store/index.js

@@ -70,15 +70,12 @@ Watcher.prototype.mutations = {
   sort(states, options) {
     const { prop, order } = options;
     if (prop) {
-      // TODO：nextTick 是否有必要？
-      Vue.nextTick(() => {
-        const column = arrayFind(states.columns, column => column.property === prop);
-        if (column) {
-          column.order = order;
-          this.updateSort(column, prop, order);
-          this.commit('changeSortCondition');
-        }
-      });
+      const column = arrayFind(states.columns, column => column.property === prop);
+      if (column) {
+        column.order = order;
+        this.updateSort(column, prop, order);
+        this.commit('changeSortCondition');
+      }
     }
   },
 

packages/table/src/table-header.js

@@ -192,9 +192,12 @@ export default {
   },
 
   mounted() {
-    const { prop, order } = this.defaultSort;
-    const init = true;
-    this.store.commit('sort', { prop, order, init });
+    // nextTick 是有必要的 https://github.com/ElemeFE/element/pull/11311
+    this.$nextTick(() => {
+      const { prop, order } = this.defaultSort;
+      const init = true;
+      this.store.commit('sort', { prop, order, init });
+    });
   },
 
   beforeDestroy() {

packages/table/src/table-layout.js

@@ -42,12 +42,16 @@ class TableLayout {
 
   updateScrollY() {
     const height = this.height;
-    if (height === null) return;
+    if (height === null) return false;
     const bodyWrapper = this.table.bodyWrapper;
     if (this.table.$el && bodyWrapper) {
       const body = bodyWrapper.querySelector('.el-table__body');
-      this.scrollY = body.offsetHeight > this.bodyHeight;
+      const prevScrollY = this.scrollY;
+      const scrollY = body.offsetHeight > this.bodyHeight;
+      this.scrollY = scrollY;
+      return prevScrollY !== scrollY;
     }
+    return false;
   }
 
   setHeight(value, prop = 'height') {
@@ -58,8 +62,11 @@ class TableLayout {
 
     if (!el && (value || value === 0)) return Vue.nextTick(() => this.setHeight(value, prop));
 
-    if (value) {
-      el.style[prop] = `${value}px`;
+    if (typeof value === 'number') {
+      el.style[prop] = value + 'px';
+      this.updateElsHeight();
+    } else if (typeof value === 'string') {
+      el.style[prop] = value;
       this.updateElsHeight();
     }
   }

packages/table/src/table.vue

@@ -381,8 +381,10 @@
       },
 
       updateScrollY() {
-        this.layout.updateScrollY();
-        this.layout.updateColumnsWidth();
+        const changed = this.layout.updateScrollY();
+        if (changed) {
+          this.layout.updateColumnsWidth();
+        }
       },
 
       handleFixedMousewheel(event, data) {
@@ -408,7 +410,7 @@
         }
       },
 
-      // TODO 性能优化
+      // TODO 使用 CSS transform
       syncPostion: throttle(20, function() {
         const { scrollLeft, scrollTop, offsetWidth, scrollWidth } = this.bodyWrapper;
         const { headerWrapper, footerWrapper, fixedBodyWrapper, rightFixedBodyWrapper } = this.$refs;
@@ -464,10 +466,10 @@
       },
 
       doLayout() {
-        this.layout.updateColumnsWidth();
         if (this.shouldUpdateHeight) {
           this.layout.updateElsHeight();
         }
+        this.layout.updateColumnsWidth();
       },
 
       sort(prop, order) {
@@ -509,7 +511,7 @@
           };
         } else if (this.maxHeight) {
           const maxHeight = parseHeight(this.maxHeight);
-          if (maxHeight) {
+          if (typeof maxHeight === 'number') {
             return {
               'max-height': (maxHeight - footerHeight - (this.showHeader ? headerHeight : 0)) + 'px'
             };
@@ -525,7 +527,7 @@
           };
         } else if (this.maxHeight) {
           let maxHeight = parseHeight(this.maxHeight);
-          if (maxHeight) {
+          if (typeof maxHeight === 'number') {
             maxHeight = this.layout.scrollX ? maxHeight - this.layout.gutterWidth : maxHeight;
             if (this.showHeader) {
               maxHeight -= this.layout.headerHeight;
@@ -597,11 +599,6 @@
         immediate: true,
         handler(value) {
           this.store.commit('setData', value);
-          if (this.$ready) {
-            this.$nextTick(() => {
-              this.doLayout();
-            });
-          }
         }
       },
 

packages/table/src/util.js

@@ -175,10 +175,11 @@ export function parseHeight(height) {
     return height;
   }
   if (typeof height === 'string') {
-    if (/^\d+(?:px)?/.test(height)) {
+    if (/^\d+(?:px)?$/.test(height)) {
       return parseInt(height, 10);
+    } else {
+      return height;
     }
-    console.warn('[Element Warn][ElTable]invalid height and it will be ignored.');
   }
   return null;
 }