other / mew-iview

Commit 77201524baf3a26262824783c8586074af81a48a

Authored by huanghong
1 parent 75803add

column add prop minValue and maxValue

Showing 2 changed files with 139 additions and 53 deletions   Show diff stats
Inline Side-by-side
examples/routers/table.vue
  Show/Hide comments   View file @7720152
1 <template> 1 <template>
2 <div> 2 <div>
3 - <br><br><br><br><br> 3 + <!-- <br><br><br><br><br>
4 <Table border :columns="columns1" height="500" :data="data1"></Table> 4 <Table border :columns="columns1" height="500" :data="data1"></Table>
5 - <br><br><br><br><br> 5 + <br><br><br><br><br> -->
6 <!--<Table width="550" height="200" border :columns="columns2" :data="data4"></Table>--> 6 <!--<Table width="550" height="200" border :columns="columns2" :data="data4"></Table>-->
7 <!--<br><br><br><br><br>--> 7 <!--<br><br><br><br><br>-->
8 - <Table border :columns="columns5" height="240" :data="data5"></Table> 8 + <!-- <Table border :columns="columns5" height="240" :data="data5"></Table> -->
9 <br><br><br><br><br> 9 <br><br><br><br><br>
10 - <Table border :columns="columns6" :data="data5"></Table> 10 + <!-- <Table border :columns="columns6" :data="data5"></Table> -->
11 <br><br><br><br><br> 11 <br><br><br><br><br>
12 - <Table border :columns="columns7" height="240" :data="data7"></Table> 12 + <!-- <Table border :columns="columns7" height="240" :data="data7"></Table>
  13 + <br><br><br><br><br> -->
  14 + <Table border :columns="columns8" :data="data7" height="200"></Table>
13 <br><br><br><br><br> 15 <br><br><br><br><br>
14 </div> 16 </div>
15 </template> 17 </template>
@@ -117,7 +119,7 @@ @@ -117,7 +119,7 @@
117 key: 'gender', 119 key: 'gender',
118 align: 'center', 120 align: 'center',
119 width: 200, 121 width: 200,
120 - //fixed: 'right' 122 + fixed: 'right'
121 } 123 }
122 ], 124 ],
123 columns2: [ 125 columns2: [
@@ -393,6 +395,34 @@ @@ -393,6 +395,34 @@
393 date: '2016-10-04' 395 date: '2016-10-04'
394 } 396 }
395 ], 397 ],
  398 +
  399 + columns8: [
  400 + {
  401 + title: 'Date',
  402 + key: 'date',
  403 + sortable: true,
  404 + minWidth:100,
  405 + maxWidth:200,
  406 + },
  407 + {
  408 + title: 'Name',
  409 + key: 'name',
  410 + minWidth:100,
  411 + maxWidth:200,
  412 + },
  413 + {
  414 + title: 'Age',
  415 + key: 'age',
  416 + minWidth:100,
  417 + maxWidth:200,
  418 + },
  419 + {
  420 + title: 'Address',
  421 + key: 'address',
  422 + minWidth:200,
  423 + maxWidth:300,
  424 + }
  425 + ],
396 } 426 }
397 }, 427 },
398 mounted () { 428 mounted () {
src/components/table/table.vue
  Show/Hide comments   View file @7720152
@@ -375,60 +375,116 @@ @@ -375,60 +375,116 @@
375 }); 375 });
376 this.$nextTick(() => { 376 this.$nextTick(() => {
377 let columnsWidth = {}; 377 let columnsWidth = {};
378 - let autoWidthIndex = -1;  
379 - if (allWidth) autoWidthIndex = this.cloneColumns.findIndex(cell => !cell.width);//todo 这行可能有问题  
380 -  
381 - if (this.data.length) {  
382 - const $tr = this.$refs.tbody.$el.querySelectorAll('tbody tr');  
383 - if ($tr.length === 0) return;  
384 - const $td = $tr[0].children;  
385 - for (let i = 0; i < $td.length; i++) { // can not use forEach in Firefox  
386 - const column = this.cloneColumns[i];  
387 -  
388 - let width = parseInt(getStyle($td[i], 'width'));  
389 - if (i === autoWidthIndex) {  
390 - width = parseInt(getStyle($td[i], 'width')) - 1; 378 +
  379 + let hasWidthColumns = [];
  380 + let noWidthColumns = [];
  381 + let minWidthColumns = [];
  382 + let maxWidthColumns = [];
  383 + this.cloneColumns.forEach((col) => {
  384 + if (col.width) {
  385 + hasWidthColumns.push(col);
  386 + }
  387 + else{
  388 + noWidthColumns.push(col);
  389 + if(col.minWidth){
  390 + minWidthColumns.push(col);
391 } 391 }
392 - if (column.width) width = column.width; 392 + if(col.maxWidth){
  393 + maxWidthColumns.push(col);
  394 + }
  395 + }
  396 + });
393 397
394 - this.cloneColumns[i]._width = width; 398 + minWidthColumns.sort((a,b)=>a.minWidth > b.minWidth);
  399 + maxWidthColumns.sort((a,b)=>a.maxWidth < b.maxWidth);
395 400
396 - columnsWidth[column._index] = {  
397 - width: width  
398 - }; 401 + let unUsableWidth = hasWidthColumns.map(cell => cell.width).reduce((a, b) => a + b, 0);
  402 + let usableWidth = this.tableWidth - unUsableWidth - (this.showVerticalScrollBar?this.scrollBarWidth:0);
  403 + let usableLength = noWidthColumns.length;
  404 + let columnWidth = parseInt(usableWidth / usableLength);
  405 +
  406 + for (let i = 0; i < maxWidthColumns.length; i++) {
  407 + if(columnWidth > maxWidthColumns[i].maxWidth){
  408 + usableWidth -= maxWidthColumns[i].maxWidth;
  409 + usableLength--;
  410 + columnWidth = parseInt(usableWidth / usableLength);
399 } 411 }
400 - this.columnsWidth = columnsWidth;  
401 - this.$nextTick(()=>{  
402 - this.fixedHeader();  
403 - if (this.$refs.tbody) {  
404 - let bodyContentEl = this.$refs.tbody.$el;  
405 - let bodyEl = bodyContentEl.parentElement;  
406 - let bodyContentHeight = bodyContentEl.offsetHeight;  
407 - let bodyContentWidth = bodyContentEl.offsetWidth;  
408 - let bodyWidth = bodyEl.offsetWidth;  
409 - let bodyHeight = bodyEl.offsetHeight;  
410 - let scrollBarWidth = 0;  
411 - if (bodyWidth < bodyContentWidth + (bodyHeight<bodyContentHeight?this.scrollBarWidth : 0)) {  
412 - scrollBarWidth = this.scrollBarWidth;  
413 - }  
414 -  
415 - this.showVerticalScrollBar = this.bodyHeight? bodyHeight - scrollBarWidth < bodyContentHeight : false;  
416 - this.showHorizontalScrollBar = bodyWidth < bodyContentWidth + (this.showVerticalScrollBar?this.scrollBarWidth:0);  
417 -  
418 - if(this.showVerticalScrollBar){  
419 - bodyEl.classList.add(this.prefixCls +'-overflowY');  
420 - }else{  
421 - bodyEl.classList.remove(this.prefixCls +'-overflowY');  
422 - }  
423 - if(this.showHorizontalScrollBar){  
424 - bodyEl.classList.add(this.prefixCls +'-overflowX');  
425 - }else{  
426 - bodyEl.classList.remove(this.prefixCls +'-overflowX');  
427 - } 412 + }
  413 +
  414 + for (let i = 0; i < minWidthColumns.length; i++) {
  415 + if(columnWidth < minWidthColumns[i].minWidth){
  416 + usableWidth -= minWidthColumns[i].minWidth;
  417 + usableLength--;
  418 + columnWidth = parseInt(usableWidth / usableLength);
  419 + }
  420 + }
428 421
  422 + if (usableLength===0){
  423 + columnWidth = 0;
  424 + }
  425 +
  426 + for (let i = 0; i < this.cloneColumns.length; i++) {
  427 + const column = this.cloneColumns[i];
  428 + let width = columnWidth;
  429 + if(column.width){
  430 + width = column.width;
  431 + }
  432 + else{
  433 + if (column.minWidth > width){
  434 + width = column.minWidth;
  435 + }
  436 + else if (column.maxWidth < width){
  437 + width = column.maxWidth;
  438 + }
  439 + else{
  440 + if (usableLength > 1) {
  441 + usableLength--;
  442 + usableWidth -= width;
  443 + columnWidth = parseInt(usableWidth / usableLength);
  444 + }
429 } 445 }
430 - }); 446 + }
  447 +
  448 +
  449 + this.cloneColumns[i]._width = width;
  450 +
  451 + columnsWidth[column._index] = {
  452 + width: width
  453 + };
  454 +
431 } 455 }
  456 + this.tableWidth = this.cloneColumns.map(cell => cell._width).reduce((a, b) => a + b, 0);
  457 + this.columnsWidth = columnsWidth;
  458 + this.$nextTick(()=>{
  459 + this.fixedHeader();
  460 + if (this.$refs.tbody) {
  461 + let bodyContentEl = this.$refs.tbody.$el;
  462 + let bodyEl = bodyContentEl.parentElement;
  463 + let bodyContentHeight = bodyContentEl.offsetHeight;
  464 + let bodyContentWidth = bodyContentEl.offsetWidth;
  465 + let bodyWidth = bodyEl.offsetWidth;
  466 + let bodyHeight = bodyEl.offsetHeight;
  467 + let scrollBarWidth = 0;
  468 + if (bodyWidth < bodyContentWidth + (bodyHeight<bodyContentHeight?this.scrollBarWidth : 0)) {
  469 + scrollBarWidth = this.scrollBarWidth;
  470 + }
  471 +
  472 + this.showVerticalScrollBar = this.bodyHeight? bodyHeight - scrollBarWidth < bodyContentHeight : false;
  473 + this.showHorizontalScrollBar = bodyWidth < bodyContentWidth + (this.showVerticalScrollBar?this.scrollBarWidth:0);
  474 +
  475 + if(this.showVerticalScrollBar){
  476 + bodyEl.classList.add(this.prefixCls +'-overflowY');
  477 + }else{
  478 + bodyEl.classList.remove(this.prefixCls +'-overflowY');
  479 + }
  480 + if(this.showHorizontalScrollBar){
  481 + bodyEl.classList.add(this.prefixCls +'-overflowX');
  482 + }else{
  483 + bodyEl.classList.remove(this.prefixCls +'-overflowX');
  484 + }
  485 + this.tableWidth = this.cloneColumns.map(cell => cell._width).reduce((a, b) => a + b, 0) + (this.showVerticalScrollBar?this.scrollBarWidth:0);
  486 + }
  487 + });
432 }); 488 });
433 // get table real height,for fixed when set height prop,but height < table's height,show scrollBarWidth 489 // get table real height,for fixed when set height prop,but height < table's height,show scrollBarWidth
434 this.bodyRealHeight = parseInt(getStyle(this.$refs.tbody.$el, 'height')); 490 this.bodyRealHeight = parseInt(getStyle(this.$refs.tbody.$el, 'height'));