Skip to content

Commit 02fbfc6

Browse files
author
黄书伟
committed
修复table 组件footer 汇总功能没有横向滚动条的bug
1 parent eb5352a commit 02fbfc6

File tree

4 files changed

+79
-58
lines changed

4 files changed

+79
-58
lines changed

‎packages/v-table/src/scroll-bar-control-mixin.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,14 @@
1+
import utils from '../../src/utils/utils.js'
12
export default {
23

4+
data(){
5+
6+
return {
7+
8+
scrollbarWidth:0
9+
}
10+
},
11+
312
methods: {
413
// 如果存在footer 则横向滚动条体现在footer上
514
controlScrollBar(){
@@ -23,6 +32,11 @@ export default {
2332
}
2433

2534
return false;
35+
},
36+
37+
setScrollbarWidth(){
38+
39+
this.scrollbarWidth = utils.getScrollbarWidth();
2640
}
2741
}
2842

‎packages/v-table/src/table-footer-mixin.js‎

Lines changed: 6 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,13 @@
11
import deepClone from '../../src/utils/deepClone.js'
2-
import utils from '../../src/utils/utils.js'
32

43
export default {
4+
data(){
55

6+
return {
7+
8+
footerTotalHeight:0
9+
}
10+
},
611
computed: {
712

813
frozenFooterCols(){
@@ -43,23 +48,6 @@ export default {
4348
return 0;
4449
},
4550

46-
// 如果存在横向滚动条，则包含横向滚动条的宽度
47-
getFooterContainerHeight(){
48-
49-
var result = 0;
50-
if (this.getFooterTotalRowHeight > 0) {
51-
52-
result = this.getFooterTotalRowHeight;
53-
54-
if (this.hasBodyHorizontalScrollBar()) {
55-
56-
result += utils.getScrollbarWidth();
57-
}
58-
}
59-
60-
return result;
61-
},
62-
6351
hasTableFooter(){
6452

6553
return Array.isArray(this.footer) && this.footer.length;

‎packages/v-table/src/table-resize-mixin.js‎

Lines changed: 42 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -37,32 +37,54 @@ export default {
3737
this.getResizeColumns();
3838
},
3939

40-
adjustHeight(){
40+
// 目前适用于有横向自适应功能的表格
41+
adjustHeight(hasScrollBar){
4142

42-
setTimeout(x => {
43+
if (!this.$el || this.isVerticalResize) {
44+
return false;
45+
}
4346

44-
if (!this.$el || this.isVerticalResize) {
45-
return false;
46-
}
47+
var totalColumnsHeight = this.getTotalColumnsHeight(),
48+
scrollbarWidth = this.scrollbarWidth;
4749

48-
var totalColumnsHeight = this.getTotalColumnsHeight(),
49-
scrollbarWidth = utils.getScrollbarWidth(),
50-
hasScrollBar = this.hasBodyHorizontalScrollBar();
50+
// 有footer 功能
51+
if (this.hasTableFooter) {
5152

52-
// 当没有设置高度时计算总高度 || 设置的高度大于所有列高度之和时
53-
if (!(this.height && this.height > 0) || this.height > totalColumnsHeight) {
53+
if (hasScrollBar){
5454

55-
if (hasScrollBar && this.internalHeight + 2 < totalColumnsHeight + scrollbarWidth) {
55+
if (this.footerTotalHeight === this.getFooterTotalRowHeight) {
5656

57-
this.internalHeight += scrollbarWidth;
57+
this.footerTotalHeight += scrollbarWidth;
58+
59+
if (!(this.height && this.height > 0)|| this.height > totalColumnsHeight){
60+
this.internalHeight += scrollbarWidth;
61+
}
62+
}
63+
}else if(!hasScrollBar){
5864

59-
} else if (!hasScrollBar) {
65+
if (this.footerTotalHeight > this.getFooterTotalRowHeight){
6066

61-
this.internalHeight = totalColumnsHeight;
67+
this.footerTotalHeight -=scrollbarWidth;
68+
69+
if (!(this.height && this.height > 0)|| this.height > totalColumnsHeight){
70+
71+
this.internalHeight -=scrollbarWidth;
72+
}
6273
}
6374
}
64-
})
75+
}
76+
// 当没有设置高度时计算总高度 || 设置的高度大于所有列高度之和时
77+
else if (!(this.height && this.height > 0) || this.height > totalColumnsHeight) {
6578

79+
if (hasScrollBar && this.internalHeight + 2 < totalColumnsHeight + scrollbarWidth) {
80+
81+
this.internalHeight += scrollbarWidth;
82+
83+
} else if (!hasScrollBar) {
84+
85+
this.internalHeight = this.getTotalColumnsHeight();
86+
}
87+
}
6688
},
6789

6890
// 随着窗口改变表格自适应
@@ -132,11 +154,13 @@ export default {
132154
rightViewBody.style.overflowX = 'scroll';
133155
}
134156

157+
this.adjustHeight(true);
158+
135159
} else {
136160
// 防止最后一列右距中时内容显示不全
137161
if (this.getTotalColumnsHeight() > this.internalHeight) {
138162

139-
differ -= utils.getScrollbarWidth();
163+
differ -= this.scrollbarWidth;
140164
}
141165

142166
if (this.hasTableFooter) {
@@ -146,9 +170,9 @@ export default {
146170

147171
rightViewBody.style.overflowX = 'hidden';
148172
}
149-
}
150173

151-
this.adjustHeight();
174+
this.adjustHeight(false);
175+
}
152176

153177
if (currentWidth >= initResizeWidths || differ > 0) {
154178

@@ -162,7 +186,6 @@ export default {
162186

163187
return item;
164188
})
165-
166189
}
167190
},
168191

‎packages/v-table/src/table.vue‎

Lines changed: 17 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<template>
2-
<div class="v-table-views v-table-class" :style="{'width': internalWidth+'px', 'height': getTableHeight+'px','background-color':tableBgColor}">
2+
<div class="v-table-views v-table-class"
3+
:style="{'width': internalWidth+'px', 'height': getTableHeight+'px','background-color':tableBgColor}">
34
<!--左列-->
45
<template v-if="frozenCols.length > 0">
56
<div class="v-table-leftview" :style="{'width':leftViewWidth+'px'}">
@@ -132,7 +133,7 @@
132133
<!--footer-->
133134
<div v-if="frozenFooterCols.length > 0"
134135
:class="['v-table-footer','v-table-footer-class']"
135-
:style="{'width': leftViewWidth+'px'}">
136+
:style="{'width': leftViewWidth+'px','height':footerTotalHeight}">
136137
<table class="v-table-ftable" cellspacing="0" cellpadding="0" border="0">
137138
<tr class="v-table-row" v-for="(item,rowIndex) in frozenFooterCols">
138139
<td v-for="(col,colIndex) in item"
@@ -279,7 +280,7 @@
279280
<!--footer-->
280281
<div v-if="noFrozenFooterCols.length > 0"
281282
:class="['v-table-footer','v-table-footer-class',vTableFooter]"
282-
:style="{'width': rightViewWidth+'px'}">
283+
:style="{'width': rightViewWidth+'px','height':footerTotalHeight}">
283284
<table class="v-table-ftable" cellspacing="0" cellpadding="0" border="0">
284285
<tr class="v-table-row" v-for="(item,rowIndex) in noFrozenFooterCols">
285286
<td v-for="(col,colIndex) in item"
@@ -339,7 +340,7 @@
339340
340341
export default {
341342
name: 'v-table',
342-
mixins: [classesMixin, tableResizeMixin, frozenColumnsMixin, scrollControlMixin, sortControlMixin, tableEmptyMixin, dragWidthMixin, cellEditMixin, bodyCellMergeMixin, titleCellMergeMixin, checkboxSelectionMixin, tableFooterMixin, scrollBarControlMixin,tableRowMouseEventsMixin],
343+
mixins: [classesMixin, tableResizeMixin, frozenColumnsMixin, scrollControlMixin, sortControlMixin, tableEmptyMixin, dragWidthMixin, cellEditMixin, bodyCellMergeMixin, titleCellMergeMixin, checkboxSelectionMixin, tableFooterMixin, scrollBarControlMixin, tableRowMouseEventsMixin],
343344
components: {tableEmpty, loading, VCheckboxGroup, VCheckbox},
344345
data(){
345346
return {
@@ -395,7 +396,7 @@
395396
default: 0
396397
},
397398
398-
tableBgColor:{
399+
tableBgColor: {
399400
type: String,
400401
default: '#fff'
401402
},
@@ -550,10 +551,7 @@
550551
result = this.internalHeight - this.titleRowHeight;
551552
}
552553
553-
if (this.getFooterContainerHeight) {
554-
555-
result -= this.getFooterContainerHeight;
556-
}
554+
result -= this.footerTotalHeight;
557555
558556
return result;
559557
},
@@ -676,9 +674,9 @@
676674
// 获取所有列的总高度
677675
getTotalColumnsHeight(){
678676
679-
var titleTotalHeight = (this.internalTitleRows && this.internalTitleRows.length > 0) ? this.titleRowHeight * this.internalTitleRows.length : this.titleRowHeight
677+
var titleTotalHeight = (this.internalTitleRows && this.internalTitleRows.length > 0) ? this.titleRowHeight * this.internalTitleRows.length : this.titleRowHeight;
680678
681-
titleTotalHeight += this.getFooterTotalRowHeight;
679+
titleTotalHeight += this.footerTotalHeight;
682680
683681
return titleTotalHeight + this.internalTableData.length * this.rowHeight + 1;
684682
},
@@ -696,6 +694,8 @@
696694
697695
this.internalHeight = this.height;
698696
697+
this.footerTotalHeight = this.getFooterTotalRowHeight;
698+
699699
this.internalColumns = Array.isArray(this.columns) ? deepClone(this.columns) : [];
700700
701701
this.internalTitleRows = Array.isArray(this.titleRows) ? deepClone(this.titleRows) : [];
@@ -756,7 +756,7 @@
756756
}
757757
},
758758
759-
initInternalTableData(data){
759+
initInternalTableData(){
760760
761761
return Array.isArray(this.tableData) ? deepClone(this.tableData) : [];
762762
},
@@ -781,15 +781,13 @@
781781
782782
this.updateCheckboxGroupModel();
783783
784-
this.$nextTick(x => {
785-
this.initView();
786-
})
787-
788-
this.resize();
784+
this.initView();
789785
},
790786
mounted(){
791787
792-
this.adjustHeight();
788+
this.setScrollbarWidth();
789+
790+
this.tableResize();
793791
794792
this.tableEmpty();
795793
@@ -842,9 +840,7 @@
842840
}
843841
}
844842
845-
this.resize();
846-
847-
this.adjustHeight();
843+
this.tableResize();
848844
},
849845
deep: true
850846
}

0 commit comments

Comments
 (0)