chenhaodong / mew-iview

Commit 3f5e84a19f8e614e13d7303de5a2dd0faa56b7c7

Authored by huanghong
1 parent 0f983a5c

update table columns width compute

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