Commit 9d3aada3061ae3740b3e746cd0e6a4dcd318df71
1 parent
9d304dd6
npm test
Showing
1 changed file
with
80 additions
and
80 deletions
Show diff stats
src/components/table/table.vue
| @@ -347,35 +347,55 @@ | @@ -347,35 +347,55 @@ | ||
| 347 | }, | 347 | }, |
| 348 | handleResize () { | 348 | handleResize () { |
| 349 | //let tableWidth = parseInt(getStyle(this.$el, 'width')) - 1; | 349 | //let tableWidth = parseInt(getStyle(this.$el, 'width')) - 1; |
| 350 | - let tableWidth = this.$el.offsetWidth - 1; | ||
| 351 | - let columnsWidth = {}; | ||
| 352 | - | ||
| 353 | - let hasWidthColumns = []; | ||
| 354 | - let noWidthColumns = []; | ||
| 355 | - let minWidthColumns = this.minWidthColumns; | ||
| 356 | - let maxWidthColumns = this.maxWidthColumns; | ||
| 357 | - this.cloneColumns.forEach((col) => { | ||
| 358 | - if (col.width) { | ||
| 359 | - hasWidthColumns.push(col); | 350 | + let tableWidth = this.$el.offsetWidth - 1; |
| 351 | + let columnsWidth = {}; | ||
| 352 | + | ||
| 353 | + let hasWidthColumns = []; | ||
| 354 | + let noWidthColumns = []; | ||
| 355 | + let minWidthColumns = this.minWidthColumns; | ||
| 356 | + let maxWidthColumns = this.maxWidthColumns; | ||
| 357 | + this.cloneColumns.forEach((col) => { | ||
| 358 | + if (col.width) { | ||
| 359 | + hasWidthColumns.push(col); | ||
| 360 | + } | ||
| 361 | + else{ | ||
| 362 | + noWidthColumns.push(col); | ||
| 363 | + } | ||
| 364 | + col._width = null; | ||
| 365 | + }); | ||
| 366 | + | ||
| 367 | + | ||
| 368 | + let unUsableWidth = hasWidthColumns.map(cell => cell.width).reduce((a, b) => a + b, 0); | ||
| 369 | + let usableWidth = tableWidth - unUsableWidth - (this.showVerticalScrollBar?this.scrollBarWidth:0); | ||
| 370 | + let usableLength = noWidthColumns.length; | ||
| 371 | + let columnWidth = 0; | ||
| 372 | + if(usableWidth > 0 && usableLength > 0){ | ||
| 373 | + columnWidth = parseInt(usableWidth / usableLength); | ||
| 374 | + } | ||
| 375 | + for (let i = 0; i < maxWidthColumns.length; i++) { | ||
| 376 | + if(columnWidth > maxWidthColumns[i].maxWidth){ | ||
| 377 | + maxWidthColumns[i]._width = maxWidthColumns[i].maxWidth; | ||
| 378 | + usableWidth -= maxWidthColumns[i].maxWidth; | ||
| 379 | + usableLength--; | ||
| 380 | + if (usableWidth>0) { | ||
| 381 | + if (usableLength === 0) { | ||
| 382 | + columnWidth = 0; | ||
| 383 | + } | ||
| 384 | + else { | ||
| 385 | + columnWidth = parseInt(usableWidth / usableLength); | ||
| 386 | + } | ||
| 360 | } | 387 | } |
| 361 | else{ | 388 | else{ |
| 362 | - noWidthColumns.push(col); | 389 | + columnWidth = 0; |
| 363 | } | 390 | } |
| 364 | - col._width = null; | ||
| 365 | - }); | ||
| 366 | - | ||
| 367 | - | ||
| 368 | - let unUsableWidth = hasWidthColumns.map(cell => cell.width).reduce((a, b) => a + b, 0); | ||
| 369 | - let usableWidth = tableWidth - unUsableWidth - (this.showVerticalScrollBar?this.scrollBarWidth:0); | ||
| 370 | - let usableLength = noWidthColumns.length; | ||
| 371 | - let columnWidth = 0; | ||
| 372 | - if(usableWidth > 0 && usableLength > 0){ | ||
| 373 | - columnWidth = parseInt(usableWidth / usableLength); | ||
| 374 | } | 391 | } |
| 375 | - for (let i = 0; i < maxWidthColumns.length; i++) { | ||
| 376 | - if(columnWidth > maxWidthColumns[i].maxWidth){ | ||
| 377 | - maxWidthColumns[i]._width = maxWidthColumns[i].maxWidth; | ||
| 378 | - usableWidth -= maxWidthColumns[i].maxWidth; | 392 | + } |
| 393 | + | ||
| 394 | + for (let i = 0; i < minWidthColumns.length; i++) { | ||
| 395 | + if(columnWidth < minWidthColumns[i].minWidth && !minWidthColumns[i].width){ | ||
| 396 | + if(!minWidthColumns[i]._width){ | ||
| 397 | + minWidthColumns[i]._width = minWidthColumns[i].minWidth; | ||
| 398 | + usableWidth -= minWidthColumns[i].minWidth; | ||
| 379 | usableLength--; | 399 | usableLength--; |
| 380 | if (usableWidth>0) { | 400 | if (usableWidth>0) { |
| 381 | if (usableLength === 0) { | 401 | if (usableLength === 0) { |
| @@ -389,75 +409,55 @@ | @@ -389,75 +409,55 @@ | ||
| 389 | columnWidth = 0; | 409 | columnWidth = 0; |
| 390 | } | 410 | } |
| 391 | } | 411 | } |
| 392 | - } | ||
| 393 | - | ||
| 394 | - for (let i = 0; i < minWidthColumns.length; i++) { | ||
| 395 | - if(columnWidth < minWidthColumns[i].minWidth && !minWidthColumns[i].width){ | ||
| 396 | - if(!minWidthColumns[i]._width){ | ||
| 397 | - minWidthColumns[i]._width = minWidthColumns[i].minWidth; | ||
| 398 | - usableWidth -= minWidthColumns[i].minWidth; | ||
| 399 | - usableLength--; | ||
| 400 | - if (usableWidth>0) { | ||
| 401 | - if (usableLength === 0) { | ||
| 402 | - columnWidth = 0; | ||
| 403 | - } | ||
| 404 | - else { | ||
| 405 | - columnWidth = parseInt(usableWidth / usableLength); | ||
| 406 | - } | ||
| 407 | - } | ||
| 408 | - else{ | ||
| 409 | - columnWidth = 0; | ||
| 410 | - } | ||
| 411 | - } | ||
| 412 | 412 | ||
| 413 | - } | ||
| 414 | } | 413 | } |
| 414 | + } | ||
| 415 | 415 | ||
| 416 | 416 | ||
| 417 | - for (let i = 0; i < this.cloneColumns.length; i++) { | ||
| 418 | - const column = this.cloneColumns[i]; | ||
| 419 | - let width = columnWidth; | ||
| 420 | - if(column.width){ | ||
| 421 | - width = column.width; | 417 | + for (let i = 0; i < this.cloneColumns.length; i++) { |
| 418 | + const column = this.cloneColumns[i]; | ||
| 419 | + let width = columnWidth; | ||
| 420 | + if(column.width){ | ||
| 421 | + width = column.width; | ||
| 422 | + } | ||
| 423 | + else{ | ||
| 424 | + if (column._width) { | ||
| 425 | + width = column._width; | ||
| 422 | } | 426 | } |
| 423 | - else{ | ||
| 424 | - if (column._width) { | ||
| 425 | - width = column._width; | ||
| 426 | - } | ||
| 427 | - else if (column.minWidth > width){ | ||
| 428 | - width = column.minWidth; | ||
| 429 | - } | ||
| 430 | - else if (column.maxWidth < width){ | ||
| 431 | - width = column.maxWidth; | ||
| 432 | - } | ||
| 433 | - else { | ||
| 434 | - if (usableWidth>0) { | ||
| 435 | - if (usableLength > 1) { | ||
| 436 | - usableLength--; | ||
| 437 | - usableWidth -= width; | ||
| 438 | - columnWidth = parseInt(usableWidth / usableLength); | ||
| 439 | - } | ||
| 440 | - else { | ||
| 441 | - columnWidth = 0; | ||
| 442 | - } | 427 | + else if (column.minWidth > width){ |
| 428 | + width = column.minWidth; | ||
| 429 | + } | ||
| 430 | + else if (column.maxWidth < width){ | ||
| 431 | + width = column.maxWidth; | ||
| 432 | + } | ||
| 433 | + else { | ||
| 434 | + if (usableWidth>0) { | ||
| 435 | + if (usableLength > 1) { | ||
| 436 | + usableLength--; | ||
| 437 | + usableWidth -= width; | ||
| 438 | + columnWidth = parseInt(usableWidth / usableLength); | ||
| 443 | } | 439 | } |
| 444 | - else{ | 440 | + else { |
| 445 | columnWidth = 0; | 441 | columnWidth = 0; |
| 446 | } | 442 | } |
| 447 | } | 443 | } |
| 444 | + else{ | ||
| 445 | + columnWidth = 0; | ||
| 446 | + } | ||
| 448 | } | 447 | } |
| 448 | + } | ||
| 449 | 449 | ||
| 450 | - this.cloneColumns[i]._width = width; | 450 | + this.cloneColumns[i]._width = width; |
| 451 | 451 | ||
| 452 | - columnsWidth[column._index] = { | ||
| 453 | - width: width | ||
| 454 | - }; | 452 | + columnsWidth[column._index] = { |
| 453 | + width: width | ||
| 454 | + }; | ||
| 455 | 455 | ||
| 456 | - } | 456 | + } |
| 457 | //this.tableWidth = this.cloneColumns.map(cell => cell._width).reduce((a, b) => a + b, 0); | 457 | //this.tableWidth = this.cloneColumns.map(cell => cell._width).reduce((a, b) => a + b, 0); |
| 458 | - this.tableWidth = this.cloneColumns.map(cell => cell._width).reduce((a, b) => a + b, 0) + (this.showVerticalScrollBar?this.scrollBarWidth:0); | ||
| 459 | - this.columnsWidth = columnsWidth; | ||
| 460 | - this.fixedHeader(); | 458 | + this.tableWidth = this.cloneColumns.map(cell => cell._width).reduce((a, b) => a + b, 0) + (this.showVerticalScrollBar?this.scrollBarWidth:0); |
| 459 | + this.columnsWidth = columnsWidth; | ||
| 460 | + this.fixedHeader(); | ||
| 461 | }, | 461 | }, |
| 462 | handleMouseIn (_index) { | 462 | handleMouseIn (_index) { |
| 463 | if (this.disabledHover) return; | 463 | if (this.disabledHover) return; |