diff --git a/examples/docs/en-US/table.md b/examples/docs/en-US/table.md index 8d1c42e5a..173309633 100644 --- 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 | — | diff --git a/examples/docs/es/table.md b/examples/docs/es/table.md index 8a743d6cf..9cc89711b 100644 --- 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 | — | diff --git a/examples/docs/fr-FR/table.md b/examples/docs/fr-FR/table.md index f2a4a378b..d889160bc 100644 --- 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 | — | diff --git a/examples/docs/zh-CN/table.md b/examples/docs/zh-CN/table.md index 71fc7b4a0..31b1baaa0 100644 --- 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 | — | diff --git a/packages/table/src/store/index.js b/packages/table/src/store/index.js index 421fa3008..97716a344 100644 --- 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'); + } } }, diff --git a/packages/table/src/table-header.js b/packages/table/src/table-header.js index 04bcd451e..728ac0c88 100644 --- 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() { diff --git a/packages/table/src/table-layout.js b/packages/table/src/table-layout.js index 5b78519da..d11f35263 100644 --- 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(); } } diff --git a/packages/table/src/table.vue b/packages/table/src/table.vue index 7fa096098..7d12913f1 100644 --- 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(); - }); - } } }, diff --git a/packages/table/src/util.js b/packages/table/src/util.js index 4d09de54b..7bbec8d64 100644 --- 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; }