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,8 +57,9 @@
57 <Header :style="{background: '#eee'}"><Button @click="toggleCollapse">菜单</Button></Header> 57 <Header :style="{background: '#eee'}"><Button @click="toggleCollapse">菜单</Button></Header>
58 <Content :style="{background:'#FFCF9E'}"> 58 <Content :style="{background:'#FFCF9E'}">
59 <!-- <Table border :columns="columns1" height="500" :data="data1"></Table> --> 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 </Content> 63 </Content>
63 <Footer>sdfsdsdfsdfs</Footer> 64 <Footer>sdfsdsdfsdfs</Footer>
64 </Layout> 65 </Layout>
@@ -459,11 +460,17 @@ @@ -459,11 +460,17 @@
459 460
460 columns8: [ 461 columns8: [
461 { 462 {
  463 + title: 'Address',
  464 + key: 'address',
  465 + minWidth:200,
  466 + //maxWidth:300,
  467 + },
  468 + {
462 title: 'Date', 469 title: 'Date',
463 key: 'date', 470 key: 'date',
464 sortable: true, 471 sortable: true,
465 minWidth:100, 472 minWidth:100,
466 - maxWidth:200, 473 + maxWidth:150,
467 }, 474 },
468 { 475 {
469 title: 'Name', 476 title: 'Name',
@@ -474,15 +481,9 @@ @@ -474,15 +481,9 @@
474 { 481 {
475 title: 'Age', 482 title: 'Age',
476 key: 'age', 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,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,74 +348,43 @@ @@ -350,74 +348,43 @@
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 });
367 374
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 - let usableWidth = tableWidth - unUsableWidth - (this.showVerticalScrollBar?this.scrollBarWidth:0); 377 + let usableWidth = tableWidth - unUsableWidth - sumMinWidth - (this.showVerticalScrollBar?this.scrollBarWidth:0);
371 let usableLength = noWidthColumns.length; 378 let usableLength = noWidthColumns.length;
372 let columnWidth = 0; 379 let columnWidth = 0;
373 if(usableWidth > 0 && usableLength > 0){ 380 if(usableWidth > 0 && usableLength > 0){
374 columnWidth = parseInt(usableWidth / usableLength); 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 for (let i = 0; i < this.cloneColumns.length; i++) { 385 for (let i = 0; i < this.cloneColumns.length; i++) {
419 const column = this.cloneColumns[i]; 386 const column = this.cloneColumns[i];
420 - let width = columnWidth; 387 + let width = columnWidth + (column.minWidth?column.minWidth:0);
421 if(column.width){ 388 if(column.width){
422 width = column.width; 389 width = column.width;
423 } 390 }
@@ -425,17 +392,18 @@ @@ -425,17 +392,18 @@
425 if (column._width) { 392 if (column._width) {
426 width = column._width; 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 else { 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 if (usableWidth>0) { 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 columnWidth = parseInt(usableWidth / usableLength); 407 columnWidth = parseInt(usableWidth / usableLength);
440 } 408 }
441 else { 409 else {
@@ -448,14 +416,37 @@ @@ -448,14 +416,37 @@
448 } 416 }
449 } 417 }
450 418
451 - this.cloneColumns[i]._width = width; 419 + column._width = width;
452 420
453 columnsWidth[column._index] = { 421 columnsWidth[column._index] = {
454 width: width 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 this.tableWidth = this.cloneColumns.map(cell => cell._width).reduce((a, b) => a + b, 0) + (this.showVerticalScrollBar?this.scrollBarWidth:0); 450 this.tableWidth = this.cloneColumns.map(cell => cell._width).reduce((a, b) => a + b, 0) + (this.showVerticalScrollBar?this.scrollBarWidth:0);
460 this.columnsWidth = columnsWidth; 451 this.columnsWidth = columnsWidth;
461 this.fixedHeader(); 452 this.fixedHeader();
@@ -877,25 +868,6 @@ @@ -877,25 +868,6 @@
877 makeColumnRows (fixedType, cols) { 868 makeColumnRows (fixedType, cols) {
878 return convertToRows(cols, fixedType); 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 exportCsv (params) { 871 exportCsv (params) {
900 if (params.filename) { 872 if (params.filename) {
901 if (params.filename.indexOf('.csv') === -1) { 873 if (params.filename.indexOf('.csv') === -1) {
@@ -932,7 +904,6 @@ @@ -932,7 +904,6 @@
932 }, 904 },
933 mounted () { 905 mounted () {
934 this.handleResize(); 906 this.handleResize();
935 - this.setMinMaxColumnRows();  
936 this.$nextTick(() => this.ready = true); 907 this.$nextTick(() => this.ready = true);
937 908
938 on(window, 'resize', this.handleResize); 909 on(window, 'resize', this.handleResize);
@@ -972,7 +943,6 @@ @@ -972,7 +943,6 @@
972 const colsWithId = this.makeColumnsId(this.columns); 943 const colsWithId = this.makeColumnsId(this.columns);
973 this.allColumns = getAllColumns(colsWithId); 944 this.allColumns = getAllColumns(colsWithId);
974 this.cloneColumns = this.makeColumns(colsWithId); 945 this.cloneColumns = this.makeColumns(colsWithId);
975 - this.setMinMaxColumnRows();  
976 946
977 this.columnRows = this.makeColumnRows(false, colsWithId); 947 this.columnRows = this.makeColumnRows(false, colsWithId);
978 this.leftFixedColumnRows = this.makeColumnRows('left', colsWithId); 948 this.leftFixedColumnRows = this.makeColumnRows('left', colsWithId);