|
94 | 94 | <span v-if="cellMergeContentType(rowIndex,col.field,item).isComponent"> |
95 | 95 | <component :rowData="item" :field="col.field ? col.field : ''" |
96 | 96 | :index="rowIndex" |
97 | | - :is="cellMerge(rowIndex,item,col.field).componentName" @on-custom-comp="customCompFunc"></component> |
| 97 | + :is="cellMerge(rowIndex,item,col.field).componentName" |
| 98 | + @on-custom-comp="customCompFunc"></component> |
98 | 99 | </span> |
99 | 100 | <span v-else v-html="cellMerge(rowIndex,item,col.field).content"></span> |
100 | 101 | </div> |
|
107 | 108 | > |
108 | 109 | <span v-if="typeof col.componentName ==='string' && col.componentName.length > 0"> |
109 | 110 | <component :rowData="item" :field="col.field ? col.field : ''" |
110 | | - :index="rowIndex" :is="col.componentName" @on-custom-comp="customCompFunc"></component> |
| 111 | + :index="rowIndex" :is="col.componentName" |
| 112 | + @on-custom-comp="customCompFunc"></component> |
111 | 113 | </span> |
112 | 114 | <span v-else-if="typeof col.formatter==='function'" |
113 | 115 | v-html="col.formatter(item,rowIndex,pagingIndex,col.field)"></span> |
|
133 | 135 | :style="{'width': leftViewWidth+'px'}"> |
134 | 136 | <table class="v-table-ftable" cellspacing="0" cellpadding="0" border="0"> |
135 | 137 | <tr class="v-table-row" v-for="(item,rowIndex) in frozenFooterCols"> |
136 | | - <td v-for="(col,colIndex) in item" :class="setFooterCellClassName(true,rowIndex,colIndex,col.content)"> |
| 138 | + <td v-for="(col,colIndex) in item" |
| 139 | + :class="setFooterCellClassName(true,rowIndex,colIndex,col.content)"> |
137 | 140 | <div :style="{'height':footerRowHeight+'px','line-height':footerRowHeight+'px','width':col.width+'px','text-align':col.align}" |
138 | 141 | :class="['v-table-body-cell',vTableBodyCell]" |
139 | 142 | v-html="col.content"></div> |
|
238 | 241 | > |
239 | 242 | <span v-if="cellMergeContentType(rowIndex,col.field,item).isComponent"> |
240 | 243 | <component :rowData="item" :field="col.field ? col.field : ''" :index="rowIndex" |
241 | | - :is="cellMerge(rowIndex,item,col.field).componentName" @on-custom-comp="customCompFunc"></component> |
| 244 | + :is="cellMerge(rowIndex,item,col.field).componentName" |
| 245 | + @on-custom-comp="customCompFunc"></component> |
242 | 246 | </span> |
243 | 247 | <span v-else v-html="cellMerge(rowIndex,item,col.field).content"> |
244 | 248 | </span> |
|
278 | 282 | :style="{'width': rightViewWidth+'px'}"> |
279 | 283 | <table class="v-table-ftable" cellspacing="0" cellpadding="0" border="0"> |
280 | 284 | <tr class="v-table-row" v-for="(item,rowIndex) in noFrozenFooterCols"> |
281 | | - <td v-for="(col,colIndex) in item" :class="setFooterCellClassName(false,rowIndex,colIndex,col.content)"> |
| 285 | + <td v-for="(col,colIndex) in item" |
| 286 | + :class="setFooterCellClassName(false,rowIndex,colIndex,col.content)"> |
282 | 287 | <div :style="{'height':footerRowHeight+'px','line-height':footerRowHeight+'px','width':col.width+'px','text-align':col.align}" |
283 | 288 | :class="['v-table-body-cell',vTableBodyCell]" |
284 | 289 | v-html="col.content"></div> |
|
333 | 338 |
|
334 | 339 | export default { |
335 | 340 | name: 'v-table', |
336 | | - mixins: [classesMixin,tableResizeMixin, frozenColumnsMixin, scrollControlMixin, sortControlMixin, tableEmptyMixin, dragWidthMixin, cellEditMixin, bodyCellMergeMixin, titleCellMergeMixin, checkboxSelectionMixin, tableFooterMixin, scrollBarControlMixin], |
| 341 | + mixins: [classesMixin, tableResizeMixin, frozenColumnsMixin, scrollControlMixin, sortControlMixin, tableEmptyMixin, dragWidthMixin, cellEditMixin, bodyCellMergeMixin, titleCellMergeMixin, checkboxSelectionMixin, tableFooterMixin, scrollBarControlMixin], |
337 | 342 | components: {tableEmpty, loading, VCheckboxGroup, VCheckbox}, |
338 | 343 | data(){ |
339 | 344 | return { |
|
489 | 494 | require: false, |
490 | 495 | default: 40 |
491 | 496 | }, |
492 | | - columnWidthDrag:{ |
| 497 | + columnWidthDrag: { |
493 | 498 | type: Boolean, |
494 | 499 | default: false |
495 | 500 | }, |
|
525 | 530 | // 左侧区域宽度 |
526 | 531 | leftViewWidth(){ |
527 | 532 | var result = 0 |
528 | | - if (this.frozenCols && this.frozenCols.length > 0) { |
| 533 | + if (this.hasFrozenColumn) { |
529 | 534 | result = this.frozenCols.reduce((total, curr) => total + curr.width, 0); |
530 | 535 | } |
531 | 536 | return result |
532 | 537 | }, |
533 | 538 | // 右侧区域宽度 |
534 | 539 | rightViewWidth(){ |
535 | | - return this.internalWidth - this.leftViewWidth - 2; |
| 540 | +
|
| 541 | + let result = this.internalWidth - this.leftViewWidth; |
| 542 | +
|
| 543 | + return this.hasFrozenColumn ? result - 2 : result; |
536 | 544 | }, |
537 | 545 |
|
538 | 546 | // 左侧、右侧区域高度 |
|
546 | 554 |
|
547 | 555 | if (this.getFooterContainerHeight) { |
548 | 556 |
|
549 | | - result -= this.getFooterContainerHeight + 1; |
| 557 | + result -= this.getFooterContainerHeight; |
550 | 558 | } |
551 | 559 |
|
552 | 560 | return result; |
|
610 | 618 | // custom columns component event |
611 | 619 | customCompFunc(params){ |
612 | 620 |
|
613 | | - this.$emit('on-custom-comp',params); |
| 621 | + this.$emit('on-custom-comp', params); |
614 | 622 | }, |
615 | 623 |
|
616 | 624 | setRowHoverColor(isMouseenter){ |
|
755 | 763 | if (self.isHorizontalResize) { |
756 | 764 | console.error(self.errorMsg + "If you are using the isHorizontalResize property,Please set the value for each column's width"); |
757 | 765 | } else { |
758 | | - item.width = self.internalWidth - self.totalColumnsWidth - 2; |
| 766 | + item.width = self.internalWidth - self.totalColumnsWidth; |
759 | 767 | } |
760 | 768 |
|
761 | 769 | } |
|
772 | 780 | // 当没设置宽度和高度时动态计算 |
773 | 781 | initView(){ |
774 | 782 |
|
775 | | - var self = this; |
776 | 783 | // 当没有设置宽度计算总宽度 |
777 | | - if (!(self.internalWidth && self.internalWidth > 0)) { |
| 784 | + if (!(this.internalWidth && this.internalWidth > 0)) { |
778 | 785 |
|
779 | | - if (self.columns && self.columns.length > 0) { |
780 | | - self.internalWidth = self.columns.reduce((total, curr) => total + curr.width, 0) + 2; |
| 786 | + if (this.columns && this.columns.length > 0) { |
| 787 | + this.internalWidth = this.columns.reduce((total, curr) => total + curr.width, 0); |
781 | 788 |
|
782 | 789 | } |
783 | 790 | } |
784 | 791 |
|
785 | | - var totalColumnsHeight = self.getTotalColumnsHeight(); |
| 792 | + var totalColumnsHeight = this.getTotalColumnsHeight(); |
786 | 793 |
|
787 | 794 | // 当没有设置高度时计算总高度 || 设置的高度大于所有列高度之和时 |
788 | | - if (!(self.height && self.height > 0) || self.height > totalColumnsHeight) { |
| 795 | + if (!(this.height && this.height > 0) || this.height > totalColumnsHeight) { |
789 | 796 |
|
790 | | - this.setInternalHeightByFrozen(totalColumnsHeight); |
| 797 | + this.internalHeight = totalColumnsHeight; |
791 | 798 |
|
792 | | - } else if (self.height <= totalColumnsHeight) { |
| 799 | + } else if (this.height <= totalColumnsHeight) { |
793 | 800 |
|
794 | | - self.internalHeight = self.height; |
| 801 | + this.internalHeight = this.height; |
795 | 802 | } |
796 | 803 | }, |
797 | 804 |
|
|
838 | 845 | }, |
839 | 846 | mounted(){ |
840 | 847 |
|
| 848 | + this.adjustHeight(); |
| 849 | +
|
841 | 850 | this.tableEmpty(); |
842 | 851 |
|
843 | 852 | if (Array.isArray(this.tableData) && this.tableData.length > 0) { |
|
890 | 899 | } |
891 | 900 |
|
892 | 901 | this.resize(); |
| 902 | +
|
| 903 | + this.adjustHeight(); |
893 | 904 | }, |
894 | 905 | deep: true |
895 | 906 | } |
|
0 commit comments