Commit 192e2cb849440a4259d8bb1089c4edbe57e7648d
1 parent
a3547c1b
update Table
update Table
Showing
2 changed files
with
21 additions
and
13 deletions
Show diff stats
src/components/table/table.vue
| 1 | 1 | <template> |
| 2 | 2 | <div :class="classes" :style="styles"> |
| 3 | 3 | <div :class="[prefixCls + '-title']" v-if="showSlotHeader" v-el:title><slot name="header"></slot></div> |
| 4 | - <div :class="[prefixCls + '-header']" v-if="showHeader" v-el:header> | |
| 4 | + <div :class="[prefixCls + '-header']" v-if="showHeader" v-el:header @mousewheel="handleMouseWheel"> | |
| 5 | 5 | <table cellspacing="0" cellpadding="0" border="0" :style="tableStyle"> |
| 6 | 6 | <colgroup> |
| 7 | 7 | <col v-for="column in cloneColumns" :width="setCellWidth(column, $index)"> |
| ... | ... | @@ -13,7 +13,7 @@ |
| 13 | 13 | :columns="cloneColumns"></thead> |
| 14 | 14 | </table> |
| 15 | 15 | </div> |
| 16 | - <div :class="[prefixCls + '-body']" :style="bodyStyle"> | |
| 16 | + <div :class="[prefixCls + '-body']" :style="bodyStyle" @scroll="handleBodyScroll"> | |
| 17 | 17 | <table cellspacing="0" cellpadding="0" border="0" :style="tableStyle" v-el:tbody> |
| 18 | 18 | <colgroup> |
| 19 | 19 | <col v-for="column in cloneColumns" :width="setCellWidth(column, $index)"> |
| ... | ... | @@ -168,15 +168,17 @@ |
| 168 | 168 | } |
| 169 | 169 | this.$nextTick(() => { |
| 170 | 170 | this.columnsWidth = []; |
| 171 | - let autoWidthIndex = -1 | |
| 171 | + let autoWidthIndex = -1; | |
| 172 | 172 | if (allWidth) autoWidthIndex = this.cloneColumns.findIndex(cell => !cell.width); |
| 173 | - this.$els.tbody.querySelectorAll('tbody tr')[0].querySelectorAll('td').forEach((cell, index) => { | |
| 174 | - if (index === autoWidthIndex) { | |
| 175 | - this.columnsWidth.push(parseInt(getStyle(cell, 'width')) - 1); | |
| 173 | + | |
| 174 | + const $td = this.$els.tbody.querySelectorAll('tbody tr')[0].querySelectorAll('td'); | |
| 175 | + for (let i = 0; i < $td.length; i++) { // can not use forEach in Firefox | |
| 176 | + if (i === autoWidthIndex) { | |
| 177 | + this.columnsWidth.push(parseInt(getStyle($td[i], 'width')) - 1); | |
| 176 | 178 | } else { |
| 177 | - this.columnsWidth.push(parseInt(getStyle(cell, 'width'))); | |
| 179 | + this.columnsWidth.push(parseInt(getStyle($td[i], 'width'))); | |
| 178 | 180 | } |
| 179 | - }); | |
| 181 | + } | |
| 180 | 182 | }); |
| 181 | 183 | }); |
| 182 | 184 | }, |
| ... | ... | @@ -269,6 +271,14 @@ |
| 269 | 271 | this.rightFixedColumns = right; |
| 270 | 272 | this.centerColumns = center; |
| 271 | 273 | this.cloneColumns = left.concat(center).concat(right); |
| 274 | + }, | |
| 275 | + handleBodyScroll (event) { | |
| 276 | + this.$els.header.scrollLeft = event.target.scrollLeft; | |
| 277 | + | |
| 278 | + // todo 固定时上下滚动，固定的表头也滚动 scrollTop | |
| 279 | + }, | |
| 280 | + handleMouseWheel () { | |
| 281 | + console.log(111) | |
| 272 | 282 | } |
| 273 | 283 | }, |
| 274 | 284 | compiled () { | ... | ... |
src/styles/components/table.less
| ... | ... | @@ -58,16 +58,14 @@ |
| 58 | 58 | border-bottom: none; |
| 59 | 59 | } |
| 60 | 60 | |
| 61 | + &-header{ | |
| 62 | + overflow: hidden; | |
| 63 | + } | |
| 61 | 64 | &-body{ |
| 62 | - //overflow-x: hidden; | |
| 63 | - //overflow-y: auto; | |
| 64 | 65 | overflow: auto; |
| 65 | 66 | position: relative; |
| 66 | 67 | } |
| 67 | 68 | |
| 68 | - &-with-fixed-top{ | |
| 69 | - border-bottom: 1px solid @border-color-base; | |
| 70 | - } | |
| 71 | 69 | &-with-fixed-top&-with-footer{ |
| 72 | 70 | .@{table-prefix-cls}-footer{ |
| 73 | 71 | border-top: 1px solid @border-color-base; | ... | ... |