Commit 72979a782a87de9e1560f687b07c69e526492af8
1 parent
574ec504
fix #4207
Showing
2 changed files
with
24 additions
and
4 deletions
Show diff stats
src/components/table/table.vue
| @@ -149,6 +149,10 @@ | @@ -149,6 +149,10 @@ | ||
| 149 | height: { | 149 | height: { |
| 150 | type: [Number, String] | 150 | type: [Number, String] |
| 151 | }, | 151 | }, |
| 152 | + // 3.4.0 | ||
| 153 | + maxHeight: { | ||
| 154 | + type: [Number, String] | ||
| 155 | + }, | ||
| 152 | stripe: { | 156 | stripe: { |
| 153 | type: Boolean, | 157 | type: Boolean, |
| 154 | default: false | 158 | default: false |
| @@ -275,6 +279,10 @@ | @@ -275,6 +279,10 @@ | ||
| 275 | const height = parseInt(this.height); | 279 | const height = parseInt(this.height); |
| 276 | style.height = `${height}px`; | 280 | style.height = `${height}px`; |
| 277 | } | 281 | } |
| 282 | + if (this.maxHeight) { | ||
| 283 | + const maxHeight = parseInt(this.maxHeight); | ||
| 284 | + style.maxHeight = `${maxHeight}px`; | ||
| 285 | + } | ||
| 278 | if (this.width) style.width = `${this.width}px`; | 286 | if (this.width) style.width = `${this.width}px`; |
| 279 | return style; | 287 | return style; |
| 280 | }, | 288 | }, |
| @@ -336,7 +344,11 @@ | @@ -336,7 +344,11 @@ | ||
| 336 | let style = {}; | 344 | let style = {}; |
| 337 | if (this.bodyHeight !== 0) { | 345 | if (this.bodyHeight !== 0) { |
| 338 | const height = this.bodyHeight; | 346 | const height = this.bodyHeight; |
| 339 | - style.height = `${height}px`; | 347 | + if (this.height) { |
| 348 | + style.height = `${height}px`; | ||
| 349 | + } else if (this.maxHeight) { | ||
| 350 | + style.maxHeight = `${height}px`; | ||
| 351 | + } | ||
| 340 | } | 352 | } |
| 341 | return style; | 353 | return style; |
| 342 | }, | 354 | }, |
| @@ -548,7 +560,7 @@ | @@ -548,7 +560,7 @@ | ||
| 548 | this.objData[_index]._isExpanded = status; | 560 | this.objData[_index]._isExpanded = status; |
| 549 | this.$emit('on-expand', JSON.parse(JSON.stringify(this.cloneData[_index])), status); | 561 | this.$emit('on-expand', JSON.parse(JSON.stringify(this.cloneData[_index])), status); |
| 550 | 562 | ||
| 551 | - if(this.height){ | 563 | + if(this.height || this.maxHeight){ |
| 552 | this.$nextTick(()=>this.fixedBody()); | 564 | this.$nextTick(()=>this.fixedBody()); |
| 553 | } | 565 | } |
| 554 | }, | 566 | }, |
| @@ -578,12 +590,16 @@ | @@ -578,12 +590,16 @@ | ||
| 578 | }, | 590 | }, |
| 579 | 591 | ||
| 580 | fixedHeader () { | 592 | fixedHeader () { |
| 581 | - if (this.height) { | 593 | + if (this.height || this.maxHeight) { |
| 582 | this.$nextTick(() => { | 594 | this.$nextTick(() => { |
| 583 | const titleHeight = parseInt(getStyle(this.$refs.title, 'height')) || 0; | 595 | const titleHeight = parseInt(getStyle(this.$refs.title, 'height')) || 0; |
| 584 | const headerHeight = parseInt(getStyle(this.$refs.header, 'height')) || 0; | 596 | const headerHeight = parseInt(getStyle(this.$refs.header, 'height')) || 0; |
| 585 | const footerHeight = parseInt(getStyle(this.$refs.footer, 'height')) || 0; | 597 | const footerHeight = parseInt(getStyle(this.$refs.footer, 'height')) || 0; |
| 586 | - this.bodyHeight = this.height - titleHeight - headerHeight - footerHeight; | 598 | + if (this.height) { |
| 599 | + this.bodyHeight = this.height - titleHeight - headerHeight - footerHeight; | ||
| 600 | + } else if (this.maxHeight) { | ||
| 601 | + this.bodyHeight = this.maxHeight - titleHeight - headerHeight - footerHeight; | ||
| 602 | + } | ||
| 587 | this.$nextTick(()=>this.fixedBody()); | 603 | this.$nextTick(()=>this.fixedBody()); |
| 588 | }); | 604 | }); |
| 589 | } else { | 605 | } else { |
| @@ -986,6 +1002,9 @@ | @@ -986,6 +1002,9 @@ | ||
| 986 | height () { | 1002 | height () { |
| 987 | this.handleResize(); | 1003 | this.handleResize(); |
| 988 | }, | 1004 | }, |
| 1005 | + maxHeight () { | ||
| 1006 | + this.handleResize(); | ||
| 1007 | + }, | ||
| 989 | showHorizontalScrollBar () { | 1008 | showHorizontalScrollBar () { |
| 990 | this.handleResize(); | 1009 | this.handleResize(); |
| 991 | }, | 1010 | }, |
src/styles/components/table.less
| @@ -7,6 +7,7 @@ | @@ -7,6 +7,7 @@ | ||
| 7 | border: 1px solid @border-color-base; | 7 | border: 1px solid @border-color-base; |
| 8 | border-bottom: 0; | 8 | border-bottom: 0; |
| 9 | border-right: 0; | 9 | border-right: 0; |
| 10 | + overflow: hidden; // 开启 max-height 时，没有 overflow: hidden，则底部多出 1px，早期没有 overflow 是因为有些控件没有加 transfer | ||
| 10 | } | 11 | } |
| 11 | width: inherit; | 12 | width: inherit; |
| 12 | height: 100%; | 13 | height: 100%; |