chenhaodong / 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 1 <template>
2 2 <div>
3   - <br><br><br><br><br>
  3 + <!-- <br><br><br><br><br>
4 4 <Table border :columns="columns1" height="500" :data="data1"></Table>
5   - <br><br><br><br><br>
  5 + <br><br><br><br><br> -->
6 6 <!--<Table width="550" height="200" border :columns="columns2" :data="data4"></Table>-->
7 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 9 <br><br><br><br><br>
10   - <Table border :columns="columns6" :data="data5"></Table>
  10 + <!-- <Table border :columns="columns6" :data="data5"></Table> -->
11 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 15 <br><br><br><br><br>
14 16 </div>
15 17 </template>
... ... @@ -117,7 +119,7 @@
117 119 key: 'gender',
118 120 align: 'center',
119 121 width: 200,
120   - //fixed: 'right'
  122 + fixed: 'right'
121 123 }
122 124 ],
123 125 columns2: [
... ... @@ -393,6 +395,34 @@
393 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 428 mounted () {
... ...
src/components/table/table.vue
  Show/Hide comments   View file @7720152
... ... @@ -375,60 +375,116 @@
375 375 });
376 376 this.$nextTick(() => {
377 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 489 // get table real height,for fixed when set height prop,but height < table's height,show scrollBarWidth
434 490 this.bodyRealHeight = parseInt(getStyle(this.$refs.tbody.$el, 'height'));
... ...