Commit eec3859c1153752f6ac5601f7e397b1e8ad6928d
1 parent
6b90a39c
fixed table scollbar
Showing
6 changed files
with
19 additions
and
36 deletions
Show diff stats
examples/routers/table.vue
| @@ -5,7 +5,7 @@ | @@ -5,7 +5,7 @@ | ||
| 5 | <br><br><br><br><br> | 5 | <br><br><br><br><br> |
| 6 | <!--<Table width="550" height="200" border :columns="columns2" :data="data4"></Table>--> | 6 | <!--<Table width="550" height="200" border :columns="columns2" :data="data4"></Table>--> |
| 7 | <!--<br><br><br><br><br>--> | 7 | <!--<br><br><br><br><br>--> |
| 8 | - <Table border :columns="columns5" height="200" :data="data5"></Table> | 8 | + <Table border :columns="columns5" height="240" :data="data5"></Table> |
| 9 | <br><br><br><br><br> | 9 | <br><br><br><br><br> |
| 10 | <Table border :columns="columns6" :data="data5"></Table> | 10 | <Table border :columns="columns6" :data="data5"></Table> |
| 11 | <br><br><br><br><br> | 11 | <br><br><br><br><br> |
src/components/table/mixin.js
| @@ -17,37 +17,13 @@ export default { | @@ -17,37 +17,13 @@ export default { | ||
| 17 | isPopperShow (column) { | 17 | isPopperShow (column) { |
| 18 | return column.filters && ((!this.fixed && !column.fixed) || (this.fixed === 'left' && column.fixed === 'left') || (this.fixed === 'right' && column.fixed === 'right')); | 18 | return column.filters && ((!this.fixed && !column.fixed) || (this.fixed === 'left' && column.fixed === 'left') || (this.fixed === 'right' && column.fixed === 'right')); |
| 19 | }, | 19 | }, |
| 20 | - setCellWidth (column, index, top) { | 20 | + setCellWidth (column) { |
| 21 | let width = ''; | 21 | let width = ''; |
| 22 | if (column.width) { | 22 | if (column.width) { |
| 23 | width = column.width; | 23 | width = column.width; |
| 24 | } else if (this.columnsWidth[column._index]) { | 24 | } else if (this.columnsWidth[column._index]) { |
| 25 | width = this.columnsWidth[column._index].width; | 25 | width = this.columnsWidth[column._index].width; |
| 26 | } | 26 | } |
| 27 | - // when browser has scrollBar,set a width to resolve scroll position bug | ||
| 28 | - if (width && this.columns.length === index + 1 && top && this.$parent.bodyHeight !== 0 && column.fixed!=='left' && !this.fixed) { | ||
| 29 | - let scrollBarWidth = this.$parent.scrollBarWidth; | ||
| 30 | - if (!this.$parent.showVerticalScrollBar) scrollBarWidth = 0; | ||
| 31 | - width += scrollBarWidth; | ||
| 32 | - } | ||
| 33 | - // when fixed type,reset first right fixed column's width | ||
| 34 | - if (this.fixed === 'right' && top ) { | ||
| 35 | - //const firstFixedIndex = this.columns.lastIndexOf((col) => col.fixed === 'right'); | ||
| 36 | - let lastFixedIndex = -1; | ||
| 37 | - for(let i=0;i<this.columns.length;i++){ | ||
| 38 | - if(this.columns[i].fixed==='right'){ | ||
| 39 | - lastFixedIndex = i; | ||
| 40 | - } | ||
| 41 | - else{ | ||
| 42 | - break; | ||
| 43 | - } | ||
| 44 | - } | ||
| 45 | - if (lastFixedIndex === index) { | ||
| 46 | - let scrollBarWidth = this.$parent.scrollBarWidth; | ||
| 47 | - if (!this.$parent.showVerticalScrollBar) scrollBarWidth = 0; | ||
| 48 | - width += scrollBarWidth; | ||
| 49 | - } | ||
| 50 | - } | ||
| 51 | if (width === '0') width = ''; | 27 | if (width === '0') width = ''; |
| 52 | return width; | 28 | return width; |
| 53 | } | 29 | } |
src/components/table/table-body.vue
| 1 | <template> | 1 | <template> |
| 2 | <table cellspacing="0" cellpadding="0" border="0" :style="styleObject"> | 2 | <table cellspacing="0" cellpadding="0" border="0" :style="styleObject"> |
| 3 | <colgroup> | 3 | <colgroup> |
| 4 | - <col v-for="(column, index) in columns" :width="setCellWidth(column, index, false)"> | 4 | + <col v-for="(column, index) in columns" :width="setCellWidth(column)"> |
| 5 | </colgroup> | 5 | </colgroup> |
| 6 | <tbody :class="[prefixCls + '-tbody']"> | 6 | <tbody :class="[prefixCls + '-tbody']"> |
| 7 | <template v-for="(row, index) in data"> | 7 | <template v-for="(row, index) in data"> |
src/components/table/table-head.vue
| 1 | <template> | 1 | <template> |
| 2 | <table cellspacing="0" cellpadding="0" border="0" :style="styles"> | 2 | <table cellspacing="0" cellpadding="0" border="0" :style="styles"> |
| 3 | <colgroup> | 3 | <colgroup> |
| 4 | - <col v-for="(column, index) in columns" :width="setCellWidth(column, index, true)"> | 4 | + <col v-for="(column, index) in columns" :width="setCellWidth(column)"> |
| 5 | + <col v-if="$parent.showVerticalScrollBar" :width="$parent.scrollBarWidth"/> | ||
| 5 | </colgroup> | 6 | </colgroup> |
| 6 | <thead> | 7 | <thead> |
| 7 | <tr v-for="(cols, rowIndex) in headRows"> | 8 | <tr v-for="(cols, rowIndex) in headRows"> |
| @@ -59,6 +60,8 @@ | @@ -59,6 +60,8 @@ | ||
| 59 | </template> | 60 | </template> |
| 60 | </div> | 61 | </div> |
| 61 | </th> | 62 | </th> |
| 63 | + | ||
| 64 | + <th v-if="$parent.showVerticalScrollBar" :rowspan="headRows.length"></th> | ||
| 62 | </tr> | 65 | </tr> |
| 63 | </thead> | 66 | </thead> |
| 64 | </table> | 67 | </table> |
| @@ -93,12 +96,7 @@ | @@ -93,12 +96,7 @@ | ||
| 93 | computed: { | 96 | computed: { |
| 94 | styles () { | 97 | styles () { |
| 95 | const style = Object.assign({}, this.styleObject); | 98 | const style = Object.assign({}, this.styleObject); |
| 96 | - let scrollBarWidth = this.$parent.scrollBarWidth; | ||
| 97 | - if(!this.$parent.showVerticalScrollBar) scrollBarWidth = 0; | ||
| 98 | - | ||
| 99 | - let isLeftFixed = this.$el && this.$el.parentElement.className.indexOf('fixed-header')>0; | ||
| 100 | - if(isLeftFixed) scrollBarWidth = 0; | ||
| 101 | - const width = this.$parent.bodyHeight === 0 ? parseInt(this.styleObject.width) : parseInt(this.styleObject.width) + scrollBarWidth; | 99 | + const width = parseInt(this.styleObject.width) ; |
| 102 | style.width = `${width}px`; | 100 | style.width = `${width}px`; |
| 103 | return style; | 101 | return style; |
| 104 | }, | 102 | }, |
src/components/table/table.vue
| @@ -5,7 +5,7 @@ | @@ -5,7 +5,7 @@ | ||
| 5 | <div :class="[prefixCls + '-header']" v-if="showHeader" ref="header" @mousewheel="handleMouseWheel"> | 5 | <div :class="[prefixCls + '-header']" v-if="showHeader" ref="header" @mousewheel="handleMouseWheel"> |
| 6 | <table-head | 6 | <table-head |
| 7 | :prefix-cls="prefixCls" | 7 | :prefix-cls="prefixCls" |
| 8 | - :styleObject="tableStyle" | 8 | + :styleObject="tableHeaderStyle" |
| 9 | :columns="cloneColumns" | 9 | :columns="cloneColumns" |
| 10 | :column-rows="columnRows" | 10 | :column-rows="columnRows" |
| 11 | :obj-data="objData" | 11 | :obj-data="objData" |
| @@ -275,6 +275,15 @@ | @@ -275,6 +275,15 @@ | ||
| 275 | } | 275 | } |
| 276 | return style; | 276 | return style; |
| 277 | }, | 277 | }, |
| 278 | + tableHeaderStyle () { | ||
| 279 | + let style = {}; | ||
| 280 | + if (this.tableWidth !== 0) { | ||
| 281 | + let width = ''; | ||
| 282 | + width = this.tableWidth; | ||
| 283 | + style.width = `${width}px`; | ||
| 284 | + } | ||
| 285 | + return style; | ||
| 286 | + }, | ||
| 278 | fixedTableStyle () { | 287 | fixedTableStyle () { |
| 279 | let style = {}; | 288 | let style = {}; |
| 280 | let width = 0; | 289 | let width = 0; |