diff --git a/src/components/table/table.vue b/src/components/table/table.vue index 51df582..4479d00 100644 --- a/src/components/table/table.vue +++ b/src/components/table/table.vue @@ -18,35 +18,42 @@ :clone-data="cloneData"></table-body> </div> <div :class="[prefixCls + '-fixed']"> - <!--todo 设置个div头部--> - <table-head - fixed - :prefix-cls="prefixCls" - :style="fixedTableStyle" - :columns="leftFixedColumns" - :clone-data="cloneData"></table-head> - <table-body - fixed - :prefix-cls="prefixCls" - :style="fixedTableStyle" - :columns="leftFixedColumns" - :data="data" - :clone-data="cloneData"></table-body> + <div :class="[prefixCls + '-fixed-header']" v-if="showHeader"> + <table-head + fixed + :prefix-cls="prefixCls" + :style="fixedTableStyle" + :columns="leftFixedColumns" + :clone-data="cloneData"></table-head> + </div> + <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" v-el:fixed-body> + <table-body + fixed + :prefix-cls="prefixCls" + :style="fixedTableStyle" + :columns="leftFixedColumns" + :data="data" + :clone-data="cloneData"></table-body> + </div> </div> <div :class="[prefixCls + '-fixed-right']"> - <table-head - fixed - :prefix-cls="prefixCls" - :style="fixedRightTableStyle" - :columns="rightFixedColumns" - :clone-data="cloneData"></table-head> - <table-body - fixed - :prefix-cls="prefixCls" - :style="fixedRightTableStyle" - :columns="rightFixedColumns" - :data="data" - :clone-data="cloneData"></table-body> + <div :class="[prefixCls + '-fixed-header']" v-if="showHeader"> + <table-head + fixed + :prefix-cls="prefixCls" + :style="fixedRightTableStyle" + :columns="rightFixedColumns" + :clone-data="cloneData"></table-head> + </div> + <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" v-el:fixed-right-body> + <table-body + fixed + :prefix-cls="prefixCls" + :style="fixedRightTableStyle" + :columns="rightFixedColumns" + :data="data" + :clone-data="cloneData"></table-body> + </div> </div> <div :class="[prefixCls + '-footer']" v-if="showSlotFooter" v-el:footer><slot name="footer"></slot></div> </div> @@ -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 f7baef6..800b920 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 5b524ac..8d4534f 100644 --- a/test/routers/table.vue +++ b/test/routers/table.vue @@ -9,7 +9,10 @@ <br> <i-table width="450" - border + height="200" + stripe + highlight-row + :show-header="true" :columns="columns" :data="data" :row-class-name="rowClsName" @@ -61,6 +64,7 @@ title: '地址', key: 'address', align: 'center', +// fixed: 'right', width: 100, // render (row, column, index) { // if (row.edit) { -- libgit2 0.21.4