Skip to content

Commit 2235036

Browse files
author
黄书伟
committed
Table 组件修复当表格配置了纵向自适应,出现横行滚动条的时候 ,横行滚动条高度会遮住最后一行表格bug
1 parent ac2f67a commit 2235036

File tree

2 files changed

+49
-17
lines changed

2 files changed

+49
-17
lines changed

packages/src/utils/utils.js

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,14 @@
11
import settings from '../settings/settings'
22

33
export default {
4-
// 获取当前元素的left、top偏移
4+
/*获取当前元素的left、top偏移
5+
* left:元素最左侧距离文档左侧的距离
6+
* top:元素最顶端距离文档顶端的距离
7+
* right:元素最右侧距离文档右侧的距离
8+
* bottom:元素最底端距离文档底端的距离
9+
* right2:元素最左侧距离文档右侧的距离
10+
* bottom2:元素最底端距离文档最底部的距离
11+
* */
512
getViewportOffset(element) {
613

714
var doc = document.documentElement,
@@ -19,7 +26,9 @@ export default {
1926
left: left,
2027
top: top,
2128
right: window.document.documentElement.clientWidth - box.width - left,
22-
bottom: window.document.documentElement.clientHeight - box.height - top
29+
bottom: window.document.documentElement.clientHeight - box.height - top,
30+
right2: window.document.documentElement.clientWidth - left,
31+
bottom2: window.document.documentElement.clientHeight - top,
2332
}
2433
},
2534

@@ -99,7 +108,7 @@ export default {
99108
// 是否包含横向滚动条
100109
hasHorizontalScrollBar(ele){
101110

102-
if (ele){
111+
if (ele) {
103112

104113
return ele.scrollWidth > ele.clientWidth;
105114
}
@@ -108,7 +117,7 @@ export default {
108117
// 是否包含纵向滚动条
109118
hasVerticalScrollBar(ele){
110119

111-
if (ele){
120+
if (ele) {
112121

113122
return ele.scrollHeight > ele.clientHeight;
114123
}
@@ -140,14 +149,14 @@ export default {
140149
},
141150

142151
// 获取父组件信息
143-
getParentCompByName(context,name){
152+
getParentCompByName(context, name){
144153

145154
let parent = context.$parent;
146155

147156
while (parent) {
148157
if (parent.$options.name !== name) {
149158
parent = parent.$parent;
150-
}else{
159+
} else {
151160
return parent;
152161
}
153162
}
@@ -156,19 +165,19 @@ export default {
156165
},
157166

158167
// 获取多个符合条件的子组件信息
159-
getChildCompsByName(context,name){
168+
getChildCompsByName(context, name){
160169

161170
let result = [];
162171

163172
let childrens = context.$children;
164173

165174
while (childrens && childrens.length > 0) {
166175

167-
childrens.forEach(child=>{
176+
childrens.forEach(child => {
168177

169178
childrens = child.$children ? child.$children : null;
170179

171-
if (child.$options.name === name){
180+
if (child.$options.name === name) {
172181

173182
result.push(child);
174183
}

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

Lines changed: 31 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -120,8 +120,18 @@ export default {
120120
currentWidth = view.getBoundingClientRect !== 'undefined' ? view.getBoundingClientRect().width : view.clientWidth,
121121
currentHeight = view.getBoundingClientRect !== 'undefined' ? view.getBoundingClientRect().height : view.clientHeight,
122122
//right = window.document.documentElement.clientWidth - currentWidth - viewOffset.left,
123-
bottom = window.document.documentElement.clientHeight - currentHeight - viewOffset.top - 2; //
123+
bottom = window.document.documentElement.clientHeight - currentHeight - viewOffset.top - 2,
124+
bottom2 = viewOffset.bottom2,
125+
scrollbarWidth = this.scrollbarWidth;
126+
124127

128+
if (this.isHorizontalResize && this.internalWidth && this.internalWidth > 0 && currentWidth > 0) {
129+
130+
currentWidth = currentWidth > maxWidth ? maxWidth : currentWidth;
131+
currentWidth = currentWidth < minWidth ? minWidth : currentWidth;
132+
133+
this.internalWidth = currentWidth;
134+
}
125135

126136
if (this.isVerticalResize && currentHeight > 0) {
127137

@@ -130,17 +140,30 @@ export default {
130140
currentHeight = currentHeight + bottom;// - this.VerticalResizeOffset;
131141
currentHeight = currentHeight > maxHeight ? maxHeight : currentHeight;
132142
currentHeight = currentHeight < minHeight ? minHeight : currentHeight;
133-
this.internalHeight = currentHeight;
134-
}
135143

136-
if (this.isHorizontalResize && this.internalWidth && this.internalWidth > 0 && currentWidth > 0) {
144+
// 有横向滚动条
145+
if (currentWidth <= this.initTotalColumnsWidth && !this.isTableEmpty) {
137146

138-
currentWidth = currentWidth > maxWidth ? maxWidth : currentWidth;
139-
currentWidth = currentWidth < minWidth ? minWidth : currentWidth;
147+
bottom2 -= this.verticalResizeOffset;
140148

141-
this.internalWidth = currentWidth;
142-
this.changeColumnsWidth(currentWidth);
149+
let differ = bottom2 - totalColumnsHeight;
150+
151+
// 高度足够(table 顶部到文档底部的高度 > 表格高度+滚动条高度)
152+
if (bottom2 > totalColumnsHeight + scrollbarWidth){
153+
154+
currentHeight += scrollbarWidth;
155+
156+
}
157+
else if(differ > 0 && differ < scrollbarWidth){
158+
159+
currentHeight += differ;
160+
}
161+
}
162+
163+
this.internalHeight = currentHeight;
143164
}
165+
166+
this.changeColumnsWidth(currentWidth);
144167
},
145168

146169
// 改变所有需要自适应列的宽度

0 commit comments

Comments
 (0)