chenhaodong / mew-iview

Commit 3dc998e6abd62ec5734822899faeb4f88db6929e

Authored by Aresn
Committed by GitHub
2 parents 86b3ba85 4fd4d763

Merge pull request #3415 from huanghong1125/table 

update table
Showing 2 changed files with 61 additions and 90 deletions   Show diff stats
Inline Side-by-side
examples/routers/table.vue
  Show/Hide comments   View file @3dc998e
... ... @@ -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>
... ... @@ -459,11 +460,17 @@
459 460  
460 461 columns8: [
461 462 {
  463 + title: 'Address',
  464 + key: 'address',
  465 + minWidth:200,
  466 + //maxWidth:300,
  467 + },
  468 + {
462 469 title: 'Date',
463 470 key: 'date',
464 471 sortable: true,
465 472 minWidth:100,
466   - maxWidth:200,
  473 + maxWidth:150,
467 474 },
468 475 {
469 476 title: 'Name',
... ... @@ -474,15 +481,9 @@
474 481 {
475 482 title: 'Age',
476 483 key: 'age',
477   - minWidth:100,
478   - maxWidth:200,
  484 + minWidth:60,
  485 + maxWidth:100,
479 486 },
480   - {
481   - title: 'Address',
482   - key: 'address',
483   - minWidth:200,
484   - maxWidth:300,
485   - }
486 487 ],
487 488 }
488 489 },
... ...
src/components/table/table.vue
  Show/Hide comments   View file @3dc998e
... ... @@ -188,8 +188,6 @@
188 188 objData: this.makeObjData(), // checkbox or highlight-row
189 189 rebuildData: [], // for sort or filter
190 190 cloneColumns: this.makeColumns(colsWithId),
191   - minWidthColumns:[],
192   - maxWidthColumns:[],
193 191 columnRows: this.makeColumnRows(false, colsWithId),
194 192 leftFixedColumnRows: this.makeColumnRows('left', colsWithId),
195 193 rightFixedColumnRows: this.makeColumnRows('right', colsWithId),
... ... @@ -350,74 +348,43 @@
350 348 //let tableWidth = parseInt(getStyle(this.$el, 'width')) - 1;
351 349 let tableWidth = this.$el.offsetWidth - 1;
352 350 let columnsWidth = {};
353   -
  351 + let sumMinWidth = 0;
354 352 let hasWidthColumns = [];
355 353 let noWidthColumns = [];
356   - let minWidthColumns = this.minWidthColumns;
357   - let maxWidthColumns = this.maxWidthColumns;
  354 + let maxWidthColumns = [];
  355 + let noMaxWidthColumns = [];
358 356 this.cloneColumns.forEach((col) => {
359 357 if (col.width) {
360 358 hasWidthColumns.push(col);
361 359 }
362 360 else{
363 361 noWidthColumns.push(col);
  362 + if (col.minWidth) {
  363 + sumMinWidth += col.minWidth;
  364 + }
  365 + if (col.maxWidth) {
  366 + maxWidthColumns.push(col);
  367 + }
  368 + else {
  369 + noMaxWidthColumns.push(col);
  370 + }
364 371 }
365 372 col._width = null;
366 373 });
367 374  
368 375  
369 376 let unUsableWidth = hasWidthColumns.map(cell => cell.width).reduce((a, b) => a + b, 0);
370   - let usableWidth = tableWidth - unUsableWidth - (this.showVerticalScrollBar?this.scrollBarWidth:0);
  377 + let usableWidth = tableWidth - unUsableWidth - sumMinWidth - (this.showVerticalScrollBar?this.scrollBarWidth:0);
371 378 let usableLength = noWidthColumns.length;
372 379 let columnWidth = 0;
373 380 if(usableWidth > 0 && usableLength > 0){
374 381 columnWidth = parseInt(usableWidth / usableLength);
375 382 }
376   - for (let i = 0; i < maxWidthColumns.length; i++) {
377   - if(columnWidth > maxWidthColumns[i].maxWidth){
378   - maxWidthColumns[i]._width = maxWidthColumns[i].maxWidth;
379   - usableWidth -= maxWidthColumns[i].maxWidth;
380   - usableLength--;
381   - if (usableWidth>0) {
382   - if (usableLength === 0) {
383   - columnWidth = 0;
384   - }
385   - else {
386   - columnWidth = parseInt(usableWidth / usableLength);
387   - }
388   - }
389   - else{
390   - columnWidth = 0;
391   - }
392   - }
393   - }
394   -
395   - for (let i = 0; i < minWidthColumns.length; i++) {
396   - if(columnWidth < minWidthColumns[i].minWidth && !minWidthColumns[i].width){
397   - if(!minWidthColumns[i]._width){
398   - minWidthColumns[i]._width = minWidthColumns[i].minWidth;
399   - usableWidth -= minWidthColumns[i].minWidth;
400   - usableLength--;
401   - if (usableWidth>0) {
402   - if (usableLength === 0) {
403   - columnWidth = 0;
404   - }
405   - else {
406   - columnWidth = parseInt(usableWidth / usableLength);
407   - }
408   - }
409   - else{
410   - columnWidth = 0;
411   - }
412   - }
413   -
414   - }
415   - }
416 383  
417 384  
418 385 for (let i = 0; i < this.cloneColumns.length; i++) {
419 386 const column = this.cloneColumns[i];
420   - let width = columnWidth;
  387 + let width = columnWidth + (column.minWidth?column.minWidth:0);
421 388 if(column.width){
422 389 width = column.width;
423 390 }
... ... @@ -425,17 +392,18 @@
425 392 if (column._width) {
426 393 width = column._width;
427 394 }
428   - else if (column.minWidth > width){
429   - width = column.minWidth;
430   - }
431   - else if (column.maxWidth < width){
432   - width = column.maxWidth;
433   - }
434 395 else {
  396 + if (column.minWidth > width){
  397 + width = column.minWidth;
  398 + }
  399 + else if (column.maxWidth < width){
  400 + width = column.maxWidth;
  401 + }
  402 +
435 403 if (usableWidth>0) {
436   - if (usableLength > 1) {
437   - usableLength--;
438   - usableWidth -= width;
  404 + usableWidth -= width - (column.minWidth?column.minWidth:0);
  405 + usableLength--;
  406 + if (usableLength > 0) {
439 407 columnWidth = parseInt(usableWidth / usableLength);
440 408 }
441 409 else {
... ... @@ -448,14 +416,37 @@
448 416 }
449 417 }
450 418  
451   - this.cloneColumns[i]._width = width;
  419 + column._width = width;
452 420  
453 421 columnsWidth[column._index] = {
454 422 width: width
455 423 };
456 424  
457 425 }
458   - //this.tableWidth = this.cloneColumns.map(cell => cell._width).reduce((a, b) => a + b, 0);
  426 + if(usableWidth>0) {
  427 + usableLength = noMaxWidthColumns.length;
  428 + columnWidth = parseInt(usableWidth / usableLength);
  429 + for (let i = 0; i < noMaxWidthColumns.length; i++) {
  430 + const column = noMaxWidthColumns[i];
  431 + let width = column._width + columnWidth;
  432 + if (usableLength > 1) {
  433 + usableLength--;
  434 + usableWidth -= columnWidth;
  435 + columnWidth = parseInt(usableWidth / usableLength);
  436 + }
  437 + else {
  438 + columnWidth = 0;
  439 + }
  440 +
  441 + column._width = width;
  442 +
  443 + columnsWidth[column._index] = {
  444 + width: width
  445 + };
  446 +
  447 + }
  448 + }
  449 +
459 450 this.tableWidth = this.cloneColumns.map(cell => cell._width).reduce((a, b) => a + b, 0) + (this.showVerticalScrollBar?this.scrollBarWidth:0);
460 451 this.columnsWidth = columnsWidth;
461 452 this.fixedHeader();
... ... @@ -877,25 +868,6 @@
877 868 makeColumnRows (fixedType, cols) {
878 869 return convertToRows(cols, fixedType);
879 870 },
880   - setMinMaxColumnRows (){
881   - let minWidthColumns=[];
882   - let maxWidthColumns=[];
883   - this.cloneColumns.forEach((col) => {
884   - if (!col.width) {
885   - if(col.minWidth){
886   - minWidthColumns.push(col);
887   - }
888   - if(col.maxWidth){
889   - maxWidthColumns.push(col);
890   - }
891   - }
892   - });
893   -
894   - minWidthColumns.sort((a,b)=>a.minWidth > b.minWidth);
895   - maxWidthColumns.sort((a,b)=>a.maxWidth < b.maxWidth);
896   - this.minWidthColumns = minWidthColumns;
897   - this.maxWidthColumns = maxWidthColumns;
898   - },
899 871 exportCsv (params) {
900 872 if (params.filename) {
901 873 if (params.filename.indexOf('.csv') === -1) {
... ... @@ -932,7 +904,6 @@
932 904 },
933 905 mounted () {
934 906 this.handleResize();
935   - this.setMinMaxColumnRows();
936 907 this.$nextTick(() => this.ready = true);
937 908  
938 909 on(window, 'resize', this.handleResize);
... ... @@ -972,7 +943,6 @@
972 943 const colsWithId = this.makeColumnsId(this.columns);
973 944 this.allColumns = getAllColumns(colsWithId);
974 945 this.cloneColumns = this.makeColumns(colsWithId);
975   - this.setMinMaxColumnRows();
976 946  
977 947 this.columnRows = this.makeColumnRows(false, colsWithId);
978 948 this.leftFixedColumnRows = this.makeColumnRows('left', colsWithId);
... ...