Commit 0f983a5c5add73148e146eb4f63886dc8ab17c90
1 parent
b0794170
update table columns width compute
Showing
2 changed files
with
16 additions
and
13 deletions
Show diff stats
examples/routers/table.vue
| ... | ... | @@ -57,8 +57,9 @@ |
| 57 | 57 | <Header :style="{background: '#eee'}"><Button @click="toggleCollapse">่ๅ</Button></Header> |
| 58 | 58 | <Content :style="{background:'#FFCF9E'}"> |
| 59 | 59 | <!-- <Table border :columns="columns1" height="500" :data="data1"></Table> --> |
| 60 | - <br> | |
| 61 | - <Table border :columns="columns5" :data="data5"></Table> | |
| 60 | + <!-- <br> --> | |
| 61 | + <!-- <Table border :columns="columns5" :data="data5"></Table> --> | |
| 62 | + <Table border :columns="columns8" height="240" :data="data7"></Table> | |
| 62 | 63 | </Content> |
| 63 | 64 | <Footer>sdfsdsdfsdfs</Footer> |
| 64 | 65 | </Layout> |
| ... | ... | @@ -462,8 +463,8 @@ |
| 462 | 463 | title: 'Date', |
| 463 | 464 | key: 'date', |
| 464 | 465 | sortable: true, |
| 465 | - minWidth:100, | |
| 466 | - maxWidth:200, | |
| 466 | + minWidth:80, | |
| 467 | + maxWidth:150, | |
| 467 | 468 | }, |
| 468 | 469 | { |
| 469 | 470 | title: 'Name', |
| ... | ... | @@ -474,14 +475,14 @@ |
| 474 | 475 | { |
| 475 | 476 | title: 'Age', |
| 476 | 477 | key: 'age', |
| 477 | - minWidth:100, | |
| 478 | - maxWidth:200, | |
| 478 | + minWidth:60, | |
| 479 | + maxWidth:100, | |
| 479 | 480 | }, |
| 480 | 481 | { |
| 481 | 482 | title: 'Address', |
| 482 | 483 | key: 'address', |
| 483 | 484 | minWidth:200, |
| 484 | - maxWidth:300, | |
| 485 | + //maxWidth:300, | |
| 485 | 486 | } |
| 486 | 487 | ], |
| 487 | 488 | } | ... | ... |
src/components/table/table.vue
| ... | ... | @@ -367,6 +367,7 @@ |
| 367 | 367 | |
| 368 | 368 | |
| 369 | 369 | let unUsableWidth = hasWidthColumns.map(cell => cell.width).reduce((a, b) => a + b, 0); |
| 370 | + console.log(tableWidth); | |
| 370 | 371 | let usableWidth = tableWidth - unUsableWidth - (this.showVerticalScrollBar?this.scrollBarWidth:0); |
| 371 | 372 | let usableLength = noWidthColumns.length; |
| 372 | 373 | let columnWidth = 0; |
| ... | ... | @@ -425,13 +426,13 @@ |
| 425 | 426 | if (column._width) { |
| 426 | 427 | width = column._width; |
| 427 | 428 | } |
| 428 | - else if (column.minWidth > width){ | |
| 429 | - width = column.minWidth; | |
| 430 | - } | |
| 431 | - else if (column.maxWidth < width){ | |
| 432 | - width = column.maxWidth; | |
| 433 | - } | |
| 434 | 429 | else { |
| 430 | + if (column.minWidth > width){ | |
| 431 | + width = column.minWidth; | |
| 432 | + } | |
| 433 | + else if (column.maxWidth < width){ | |
| 434 | + width = column.maxWidth; | |
| 435 | + } | |
| 435 | 436 | if (usableWidth>0) { |
| 436 | 437 | if (usableLength > 1) { |
| 437 | 438 | usableLength--; |
| ... | ... | @@ -457,6 +458,7 @@ |
| 457 | 458 | } |
| 458 | 459 | //this.tableWidth = this.cloneColumns.map(cell => cell._width).reduce((a, b) => a + b, 0); |
| 459 | 460 | this.tableWidth = this.cloneColumns.map(cell => cell._width).reduce((a, b) => a + b, 0) + (this.showVerticalScrollBar?this.scrollBarWidth:0); |
| 461 | + console.log(this.tableWidth); | |
| 460 | 462 | this.columnsWidth = columnsWidth; |
| 461 | 463 | this.fixedHeader(); |
| 462 | 464 | }, | ... | ... |