diff --git a/examples/routers/table.vue b/examples/routers/table.vue index 7434bfd..e8c2372 100644 --- a/examples/routers/table.vue +++ b/examples/routers/table.vue @@ -1,17 +1,19 @@ @@ -24,7 +26,8 @@ title: 'Name', key: 'name', align: 'center', - width: 200, + minWidth: 100, + maxWidth: 200, fixed: 'left', filters: [ { @@ -53,7 +56,8 @@ title: 'Age', key: 'age', align: 'center', - width: 200, + minWidth: 100, + maxWidth: 200, sortable: true }, { @@ -64,7 +68,8 @@ title: 'Street', key: 'street', align: 'center', - width: 200 + minWidth: 100, + maxWidth: 200, }, { title: 'Block', @@ -74,14 +79,16 @@ title: 'Building', key: 'building', align: 'center', - width: 200, + minWidth: 100, + maxWidth: 200, sortable: true }, { title: 'Door No.', key: 'door', align: 'center', - width: 200 + minWidth: 100, + maxWidth: 200, } ] } @@ -97,13 +104,15 @@ title: 'Company Address', key: 'caddress', align: 'center', - width: 200 + minWidth: 100, + maxWidth: 200, }, { title: 'Company Name', key: 'cname', align: 'center', - width: 200 + minWidth: 100, + maxWidth: 200, } ] }, @@ -118,7 +127,8 @@ title: 'Gender', key: 'gender', align: 'center', - width: 200, + minWidth: 100, + maxWidth: 200, fixed: 'right' } ], diff --git a/src/components/table/table.vue b/src/components/table/table.vue index 1255070..a84ae38 100644 --- a/src/components/table/table.vue +++ b/src/components/table/table.vue @@ -251,7 +251,7 @@ styles () { let style = {}; if (this.height) { - const height = (this.isLeftFixed || this.isRightFixed) ? parseInt(this.height) + this.scrollBarWidth : parseInt(this.height); + const height = parseInt(this.height); style.height = `${height}px`; } if (this.width) style.width = `${this.width}px`; @@ -318,8 +318,7 @@ bodyStyle () { let style = {}; if (this.bodyHeight !== 0) { - // add a height to resolve scroll bug when browser has a scrollBar in fixed type and height prop - const height = (this.isLeftFixed || this.isRightFixed) ? this.bodyHeight + this.scrollBarWidth : this.bodyHeight; + const height = this.bodyHeight; style.height = `${height}px`; } return style; @@ -327,15 +326,8 @@ fixedBodyStyle () { let style = {}; if (this.bodyHeight !== 0) { - let height = this.bodyHeight + (!this.showHorizontalScrollBar?this.scrollBarWidth:0) - 1; - - // #2102 里，如果 Table 没有设置 width，而是集成父级的 width，固定列也应该不包含滚动条高度，所以这里直接计算表格宽度 - const tableWidth = parseInt(getStyle(this.$el, 'width')) - 1; - if ((this.width && this.width < this.tableWidth) || tableWidth < this.tableWidth+(this.showVerticalScrollBar?this.scrollBarWidth:0)){ - height = this.bodyHeight; - } -// style.height = this.scrollBarWidth > 0 ? `${this.bodyHeight}px` : `${this.bodyHeight - 1}px`; - style.height = this.scrollBarWidth > 0 ? `${height}px` : `${height - 1}px`; + let height = this.bodyHeight - (this.showHorizontalScrollBar?this.scrollBarWidth:0); + style.height = this.showHorizontalScrollBar ? `${height}px` : `${height - 1}px`; } return style; }, @@ -365,14 +357,6 @@ this.tableWidth = parseInt(getStyle(this.$el, 'width')) - 1; } this.columnsWidth = {}; - this.$nextTick(()=>{ - this.headerWidth = this.$refs.header.childNodes[0].offsetWidth; - this.headerHeight = this.$refs.header.childNodes[0].offsetHeight; - if (!this.$refs.tbody) { - this.showVerticalScrollBar = false; - return; - } - }); this.$nextTick(() => { let columnsWidth = {}; @@ -393,6 +377,7 @@ maxWidthColumns.push(col); } } + col._width = null; }); minWidthColumns.sort((a,b)=>a.minWidth > b.minWidth); @@ -405,6 +390,7 @@ for (let i = 0; i < maxWidthColumns.length; i++) { if(columnWidth > maxWidthColumns[i].maxWidth){ + maxWidthColumns[i]._width = maxWidthColumns[i].maxWidth; usableWidth -= maxWidthColumns[i].maxWidth; usableLength--; columnWidth = parseInt(usableWidth / usableLength); @@ -412,7 +398,8 @@ } for (let i = 0; i < minWidthColumns.length; i++) { - if(columnWidth < minWidthColumns[i].minWidth){ + if(columnWidth < minWidthColumns[i].minWidth && !minWidthColumns[i].width){ + minWidthColumns[i]._width = minWidthColumns[i].minWidth; usableWidth -= minWidthColumns[i].minWidth; usableLength--; columnWidth = parseInt(usableWidth / usableLength); @@ -430,7 +417,10 @@ width = column.width; } else{ - if (column.minWidth > width){ + if(column._width){ + width = column._width; + } + else if (column.minWidth > width){ width = column.minWidth; } else if (column.maxWidth < width){ @@ -445,7 +435,6 @@ } } - this.cloneColumns[i]._width = width; columnsWidth[column._index] = { @@ -453,37 +442,11 @@ }; } - this.tableWidth = this.cloneColumns.map(cell => cell._width).reduce((a, b) => a + b, 0); + //this.tableWidth = this.cloneColumns.map(cell => cell._width).reduce((a, b) => a + b, 0); this.columnsWidth = columnsWidth; this.$nextTick(()=>{ this.fixedHeader(); - if (this.$refs.tbody) { - let bodyContentEl = this.$refs.tbody.$el; - let bodyEl = bodyContentEl.parentElement; - let bodyContentHeight = bodyContentEl.offsetHeight; - let bodyContentWidth = bodyContentEl.offsetWidth; - let bodyWidth = bodyEl.offsetWidth; - let bodyHeight = bodyEl.offsetHeight; - let scrollBarWidth = 0; - if (bodyWidth < bodyContentWidth + (bodyHeight cell._width).reduce((a, b) => a + b, 0) + (this.showVerticalScrollBar?this.scrollBarWidth:0); - } + }); }); // get table real height,for fixed when set height prop,but height < table's height,show scrollBarWidth @@ -596,11 +559,44 @@ const headerHeight = parseInt(getStyle(this.$refs.header, 'height')) || 0; const footerHeight = parseInt(getStyle(this.$refs.footer, 'height')) || 0; this.bodyHeight = this.height - titleHeight - headerHeight - footerHeight; + this.fixedBody(); }); } else { this.bodyHeight = 0; + this.fixedBody(); } }, + fixedBody (){ + this.headerWidth = this.$refs.header.childNodes[0].offsetWidth; + this.headerHeight = this.$refs.header.childNodes[0].offsetHeight; + this.showHorizontalScrollBar = this.headerWidth>this.$refs.header.parentElement.offsetWidth; + if (!this.$refs.tbody) { + this.showVerticalScrollBar = false; + return; + } + else{ + let bodyContentEl = this.$refs.tbody.$el; + let bodyEl = bodyContentEl.parentElement; + let bodyContentHeight = bodyContentEl.offsetHeight; + let bodyHeight = bodyEl.offsetHeight; + let scrollBarWidth = 0; + + this.showVerticalScrollBar = this.bodyHeight? bodyHeight - (this.showHorizontalScrollBar?this.scrollBarWidth:0) < bodyContentHeight : false; + + if(this.showVerticalScrollBar){ + bodyEl.classList.add(this.prefixCls +'-overflowY'); + }else{ + bodyEl.classList.remove(this.prefixCls +'-overflowY'); + } + if(this.showHorizontalScrollBar){ + bodyEl.classList.add(this.prefixCls +'-overflowX'); + }else{ + bodyEl.classList.remove(this.prefixCls +'-overflowX'); + } + this.tableWidth = this.cloneColumns.map(cell => cell._width).reduce((a, b) => a + b, 0) + (this.showVerticalScrollBar?this.scrollBarWidth:0); + } + }, + hideColumnFilter () { this.cloneColumns.forEach((col) => col._filterVisible = false); }, @@ -901,7 +897,6 @@ }, mounted () { this.handleResize(); - this.fixedHeader(); this.$nextTick(() => this.ready = true); on(window, 'resize', this.handleResize); @@ -911,7 +906,6 @@ this.$on('on-visible-change', (val) => { if (val) { this.handleResize(); - this.fixedHeader(); } }); }, @@ -951,11 +945,12 @@ }, height () { this.handleResize(); - this.fixedHeader(); }, showHorizontalScrollBar () { this.handleResize(); - this.fixedHeader(); + }, + showVerticalScrollBar () { + this.handleResize(); } } }; -- libgit2 0.21.4