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 @@