Table: height accepts more units (#16013)

* Table: height accepts more units * fix and update docs * update
2019-06-24 15:18:58 +08:00 · 2019-06-24 15:18:58 +08:00 · c570a59e23
parent 2cb627062c
commit c570a59e23
9 changed files with 38 additions and 33 deletions
--- a/examples/docs/en-US/table.md
+++ b/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 | — |
--- a/examples/docs/es/table.md
+++ b/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          | —                                        |
--- a/examples/docs/fr-FR/table.md
+++ b/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 | — |
--- a/examples/docs/zh-CN/table.md
+++ b/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 | — |
--- a/packages/table/src/store/index.js
+++ b/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');
+      }
    }
  },

--- a/packages/table/src/table-header.js
+++ b/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() {
--- a/packages/table/src/table-layout.js
+++ b/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();
    }
  }
--- a/packages/table/src/table.vue
+++ b/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();
-            });
-          }
        }
      },

--- a/packages/table/src/util.js
+++ b/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;
 }