diff --git a/src/components/table/table.vue b/src/components/table/table.vue index 51df5825..4479d002 100644 --- a/src/components/table/table.vue +++ b/src/components/table/table.vue @@ -18,35 +18,42 @@ :clone-data="cloneData">
- - - +
+ +
+
+ +
- - +
+ +
+
+ +
@@ -161,6 +168,11 @@ let style = {}; if (this.bodyHeight !== 0) style.height = `${this.bodyHeight}px`; return style; + }, + fixedBodyStyle () { + let style = {}; + if (this.bodyHeight !== 0) style.height = `${this.bodyHeight - 1}px`; + return style; } }, methods: { @@ -179,7 +191,6 @@ this.columnsWidth = []; let autoWidthIndex = -1; if (allWidth) autoWidthIndex = this.cloneColumns.findIndex(cell => !cell.width); - console.log(1) const $td = this.$refs.tbody.$el.querySelectorAll('tbody tr')[0].querySelectorAll('td'); for (let i = 0; i < $td.length; i++) { // can not use forEach in Firefox @@ -291,9 +302,9 @@ this.cloneColumns = left.concat(center).concat(right); }, handleBodyScroll (event) { - this.$els.header.scrollLeft = event.target.scrollLeft; - - // todo 固定时上下滚动,固定的表头也滚动 scrollTop + if (this.showHeader) this.$els.header.scrollLeft = event.target.scrollLeft; + if (this.leftFixedColumns.length) this.$els.fixedBody.scrollTop = event.target.scrollTop; + if (this.rightFixedColumns.length) this.$els.fixedRightBody.scrollTop = event.target.scrollTop; }, handleMouseWheel (event) { const deltaX = event.deltaX; diff --git a/src/styles/components/table.less b/src/styles/components/table.less index f7baef63..800b9208 100644 --- a/src/styles/components/table.less +++ b/src/styles/components/table.less @@ -33,7 +33,7 @@ top: 0; right: 0; background-color: @border-color-base; - z-index: 1; + z-index: 3; } &-with-header{ @@ -140,7 +140,9 @@ vertical-align: middle; } - &-stripe &-body{ + &-stripe &-body, + &-stripe &-fixed-body + { tr:nth-child(2n) { td{ background-color: @table-td-stripe-bg; @@ -183,7 +185,8 @@ &-row-highlight, tr&-row-highlight&-row-hover, - &-stripe &-body tr&-row-highlight:nth-child(2n) + &-stripe &-body tr&-row-highlight:nth-child(2n), + &-stripe &-fixed-body tr&-row-highlight:nth-child(2n) { td{ background-color: @table-td-highlight-bg; @@ -214,4 +217,14 @@ right: 0; box-shadow: -1px 0 8px #d3d4d6; } + &-fixed-header{ + overflow: hidden; + position: relative; + z-index: 3; + } + &-fixed-body{ + overflow: hidden; + position: relative; + z-index: 3; + } } \ No newline at end of file diff --git a/test/routers/table.vue b/test/routers/table.vue index 5b524acc..8d4534fc 100644 --- a/test/routers/table.vue +++ b/test/routers/table.vue @@ -9,7 +9,10 @@