other / 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 460  
461 461 columns8: [
462 462 {
  463 + title: 'Address',
  464 + key: 'address',
  465 + minWidth:200,
  466 + //maxWidth:300,
  467 + },
  468 + {
463 469 title: 'Date',
464 470 key: 'date',
465 471 sortable: true,
466   - minWidth:80,
  472 + minWidth:100,
467 473 maxWidth:150,
468 474 },
469 475 {
... ... @@ -478,12 +484,6 @@
478 484 minWidth:60,
479 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 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,17 +348,26 @@
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 });
... ... @@ -368,57 +375,17 @@
368 375  
369 376 let unUsableWidth = hasWidthColumns.map(cell => cell.width).reduce((a, b) => a + b, 0);
370 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 379 let usableLength = noWidthColumns.length;
373 380 let columnWidth = 0;
374 381 if(usableWidth > 0 && usableLength > 0){
375 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 386 for (let i = 0; i < this.cloneColumns.length; i++) {
420 387 const column = this.cloneColumns[i];
421   - let width = columnWidth;
  388 + let width = columnWidth + (column.minWidth?column.minWidth:0);
422 389 if(column.width){
423 390 width = column.width;
424 391 }
... ... @@ -433,10 +400,11 @@
433 400 else if (column.maxWidth < width){
434 401 width = column.maxWidth;
435 402 }
  403 +
436 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 408 columnWidth = parseInt(usableWidth / usableLength);
441 409 }
442 410 else {
... ... @@ -449,13 +417,36 @@
449 417 }
450 418 }
451 419  
452   - this.cloneColumns[i]._width = width;
  420 + column._width = width;
453 421  
454 422 columnsWidth[column._index] = {
455 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 450 //this.tableWidth = this.cloneColumns.map(cell => cell._width).reduce((a, b) => a + b, 0);
460 451 this.tableWidth = this.cloneColumns.map(cell => cell._width).reduce((a, b) => a + b, 0) + (this.showVerticalScrollBar?this.scrollBarWidth:0);
461 452 console.log(this.tableWidth);
... ... @@ -879,25 +870,6 @@
879 870 makeColumnRows (fixedType, cols) {
880 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 873 exportCsv (params) {
902 874 if (params.filename) {
903 875 if (params.filename.indexOf('.csv') === -1) {
... ... @@ -934,7 +906,6 @@
934 906 },
935 907 mounted () {
936 908 this.handleResize();
937   - this.setMinMaxColumnRows();
938 909 this.$nextTick(() => this.ready = true);
939 910  
940 911 on(window, 'resize', this.handleResize);
... ... @@ -974,7 +945,6 @@
974 945 const colsWithId = this.makeColumnsId(this.columns);
975 946 this.allColumns = getAllColumns(colsWithId);
976 947 this.cloneColumns = this.makeColumns(colsWithId);
977   - this.setMinMaxColumnRows();
978 948  
979 949 this.columnRows = this.makeColumnRows(false, colsWithId);
980 950 this.leftFixedColumnRows = this.makeColumnRows('left', colsWithId);
... ...