Skip to content

Commit ece90fe

Browse files
author
黄书伟
committed
add footer summary
1 parent dbbd6e1 commit ece90fe

File tree

7 files changed

+338
-46
lines changed

7 files changed

+338
-46
lines changed

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
export default {
2+
3+
computed: {
4+
5+
vTableFooter(){
6+
7+
return {
8+
9+
'v-table-rightview-special-border': this.hasFrozenColumn
10+
}
11+
},
12+
13+
vTableBodyInner(){
14+
15+
return {
16+
'v-table-body-inner-pb': !this.hasTableFooter
17+
}
18+
},
19+
20+
vTableBodyCell(){
21+
22+
return {
23+
'vertical-border': this.showVerticalBorder,
24+
'horizontal-border': this.showHorizontalBorder
25+
}
26+
}
27+
28+
}
29+
}

‎packages/v-table/src/frozen-columns-mixin.js‎

Lines changed: 31 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
/*
2-
* 固定列
3-
*
4-
* */
2+
* 固定列
3+
*
4+
* */
5+
import utils from '../../src/utils/utils.js'
6+
57
export default {
68
computed:{
79
// 冻结的列集合
@@ -61,5 +63,31 @@ export default {
6163
}
6264
return noFrozenTitleCols;
6365
},
66+
67+
68+
},
69+
70+
methods:{
71+
72+
// 获取滚动条高度（当没有设置高度或者设置的高度大于所有列高度之和时）
73+
setInternalHeightByFrozen(totalColumnsHeight){
74+
75+
// 包含固定列
76+
if (this.$el && this.hasFrozenColumn) {
77+
78+
this.$nextTick(x => {
79+
80+
if (this.hasBodyHorizontalScrollBar()) {
81+
82+
totalColumnsHeight += utils.getScrollbarWidth();
83+
84+
}
85+
this.internalHeight = totalColumnsHeight;
86+
})
87+
}else{
88+
89+
this.internalHeight = totalColumnsHeight;
90+
}
91+
}
6492
}
6593
}

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
export default {
2+
3+
methods: {
4+
// 如果存在footer 则横向滚动条体现在footer上
5+
controlScrollBar(){
6+
7+
if (this.hasTableFooter) {
8+
9+
var body = this.$el.querySelector('.v-table-rightview .v-table-body');
10+
body.style.overflowX = 'hidden';
11+
}
12+
},
13+
14+
// 判断右侧区域是否有横向滚动条
15+
hasBodyHorizontalScrollBar(){
16+
17+
return this.rightViewWidth < this.totalNoFrozenColumnsWidth;
18+
19+
/* var rightViewBody = this.$el.querySelector('.v-table-rightview .v-table-body'),
20+
rightViewContent = this.$el.querySelector('.v-table-rightview .v-table-body .v-table-btable');
21+
22+
return rightViewBody.clientWidth + 2 < rightViewContent.clientWidth;*/
23+
}
24+
}
25+
26+
}

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

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
import utils from '../../src/utils/utils.js'
66
export default {
7-
methods:{
7+
methods: {
88
body1Mousewheel(e){
99
var body2 = this.$el.querySelector('.v-table-rightview .v-table-body');
1010

@@ -27,24 +27,39 @@ export default {
2727
view2.querySelector('.v-table-header').scrollLeft = body2.scrollLeft;
2828
},
2929

30+
rightViewFooterScroll(){
31+
32+
var view2 = this.$el.querySelector('.v-table-rightview');
33+
34+
var rightViewFooter = this.$el.querySelector('.v-table-rightview .v-table-footer');
35+
36+
view2.querySelector('.v-table-header').scrollLeft = rightViewFooter.scrollLeft;
37+
view2.querySelector('.v-table-body').scrollLeft = rightViewFooter.scrollLeft;
38+
39+
},
40+
3041
// 列表中滚动条控制
3142
scrollControl(){
32-
this.$nextTick(x=>{
43+
this.$nextTick(x => {
3344

3445
var body1 = this.$el.querySelector('.v-table-leftview .v-table-body');
3546
var body2 = this.$el.querySelector('.v-table-rightview .v-table-body');
47+
var rightViewFooter = this.$el.querySelector('.v-table-rightview .v-table-footer');
3648

3749
utils.bind(body1, 'mousewheel', this.body1Mousewheel);
3850
utils.bind(body2, 'scroll', this.body2Scroll);
51+
utils.bind(rightViewFooter, 'scroll', this.rightViewFooterScroll);
3952
})
40-
},
53+
}
4154
},
4255

4356
beforeDestroy(){
4457
var body1 = this.$el.querySelector('.v-table-leftview .v-table-body');
4558
var body2 = this.$el.querySelector('.v-table-rightview .v-table-body');
59+
var rightViewFooter = this.$el.querySelector('.v-table-rightview .v-table-footer');
4660

4761
utils.unbind(body1, 'mousewheel', this.body1Mousewheel);
4862
utils.unbind(body2, 'scroll', this.body2Scroll);
63+
utils.bind(rightViewFooter, 'scroll', this.rightViewFooterScroll);
4964
}
5065
}

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

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
import deepClone from '../../src/utils/deepClone.js'
2+
import utils from '../../src/utils/utils.js'
3+
4+
export default {
5+
6+
computed: {
7+
8+
frozenFooterCols(){
9+
10+
var result = [];
11+
12+
if (this.initInternalFooter.length > 0) {
13+
14+
this.initInternalFooter.forEach(columns => {
15+
16+
result.push(columns.filter(col => col.isFrozen));
17+
});
18+
}
19+
20+
return result;
21+
},
22+
23+
noFrozenFooterCols(){
24+
var result = [];
25+
26+
if (this.initInternalFooter.length > 0) {
27+
28+
this.initInternalFooter.forEach(columns => {
29+
30+
result.push(columns.filter(col => !col.isFrozen));
31+
});
32+
}
33+
34+
return result;
35+
},
36+
37+
getFooterTotalRowHeight(){
38+
39+
if (Array.isArray(this.footer) && this.footer.length > 0) {
40+
41+
return this.footer.length * this.footerRowHeight;
42+
}
43+
return 0;
44+
},
45+
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+
63+
hasTableFooter(){
64+
65+
return Array.isArray(this.footer) && this.footer.length;
66+
},
67+
68+
initInternalFooter(){
69+
70+
if (!(Array.isArray(this.footer) && this.footer.length > 0)) {
71+
72+
return [];
73+
}
74+
75+
var result = [],
76+
resultRow = [],
77+
cloneInternalColumns;
78+
79+
80+
// 防止排序后对原数组进行干扰
81+
cloneInternalColumns = deepClone(this.internalColumns);
82+
83+
cloneInternalColumns.sort(function (a, b) {
84+
85+
if (a.isFrozen) {
86+
87+
return -1;
88+
} else if (b.isFrozen) {
89+
90+
return 1;
91+
}
92+
return 0;
93+
})
94+
95+
this.footer.forEach((items, rows) => {
96+
97+
resultRow = [];
98+
99+
items.forEach((value, index) => {
100+
101+
resultRow.push({
102+
content: value,
103+
width: cloneInternalColumns[index].width,
104+
align: cloneInternalColumns[index].columnAlign,
105+
isFrozen: cloneInternalColumns[index].isFrozen ? true : false
106+
});
107+
})
108+
109+
result.push(resultRow);
110+
})
111+
return result;
112+
}
113+
},
114+
115+
methods: {
116+
117+
// 设置 footer 单元格样式
118+
setFooterCellClassName(isLeftView, rowIndex, colIndex, value){
119+
120+
let _colIndex = colIndex;
121+
122+
// 如果是右列，并且有固定列
123+
if (!isLeftView && this.hasFrozenColumn) {
124+
125+
_colIndex += this.frozenCols.length;
126+
}
127+
128+
return this.footerCellClassName && this.footerCellClassName(rowIndex, _colIndex, value);
129+
},
130+
}
131+
132+
}

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

Lines changed: 23 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ export default {
5959

6060
if (self.isVerticalResize && self.internalHeight && self.internalHeight > 0 && currentHeight > 0) {
6161
// （窗口高度缩小 && 当前高度大于最小高度） || （窗口高度扩大 && 当前高度小于最大高度）
62-
bottom -=self.VerticalResizeOffset;
62+
bottom -= self.VerticalResizeOffset;
6363
if ((bottom < 0 && currentHeight > minHeight) || (bottom > 0 && currentHeight < maxHeight)) {
6464
var currentHeight = currentHeight + bottom;// - self.VerticalResizeOffset;
6565
currentHeight = currentHeight > maxHeight ? maxHeight : currentHeight;
@@ -89,21 +89,35 @@ export default {
8989

9090
var differ = currentWidth - 2 - this.totalColumnsWidth,
9191
initResizeWidths = this.initTotalColumnsWidth,
92-
rightViewBody = this.$el.querySelector('.v-table-rightview .v-table-body');
92+
rightViewBody = this.$el.querySelector('.v-table-rightview .v-table-body'),
93+
rightViewFooter = this.$el.querySelector('.v-table-rightview .v-table-footer');
9394

9495

9596
if (currentWidth <= initResizeWidths && !this.isTableEmpty) {// 排除表格无数据的影响
9697

97-
rightViewBody.style.overflowX = 'scroll';
98+
if (this.hasTableFooter){
99+
100+
rightViewFooter.style.overflowX = 'scroll';
101+
102+
}else{
103+
104+
rightViewBody.style.overflowX = 'scroll';
105+
}
98106

99107
} else {
100108
// 防止最后一列右距中时内容显示不全
101109
if (this.getTotalColumnsHeight() > this.internalHeight) {
102110

103-
differ -= (utils.getScrollbarWidth()+1);
111+
differ -= (utils.getScrollbarWidth() + 1);
104112
}
105113

106-
rightViewBody.style.overflowX = 'hidden';
114+
if (this.hasTableFooter){
115+
116+
rightViewFooter.style.overflowX = 'hidden';
117+
}else{
118+
119+
rightViewBody.style.overflowX = 'hidden';
120+
}
107121
}
108122

109123
if (currentWidth >= initResizeWidths || differ > 0) {
@@ -120,16 +134,17 @@ export default {
120134
})
121135

122136
}
123-
}
137+
},
138+
124139
},
125140

126141
mounted(){
127142

128-
utils.bind(window,'resize',this.tableResize);
143+
utils.bind(window, 'resize', this.tableResize);
129144
},
130145
beforeDestroy(){
131146

132-
utils.unbind(window,'resize',this.tableResize);
147+
utils.unbind(window, 'resize', this.tableResize);
133148
}
134149

135150
}

0 commit comments

Comments
 (0)