Skip to content

Commit 9e04e24

Browse files
author
黄书伟
committed
修复table组件边框有间隙的问题
1 parent 11690d3 commit 9e04e24

File tree

3 files changed

+31
-23
lines changed

3 files changed

+31
-23
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export default {
77
vTableRightBody(){
88

99
let result = {
10-
'v-table-rightview-special-border': this.hasFrozenColumn
10+
'v-table-rightview-special-border': true
1111
}
1212

1313
result[settings.scrollbarClass] = true;
@@ -19,7 +19,7 @@ export default {
1919

2020
let result = {
2121

22-
'v-table-rightview-special-border': this.hasFrozenColumn,
22+
'v-table-rightview-special-border': true,
2323
}
2424

2525
result[settings.scrollbarClass] = true;

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,8 @@ export default {
5151
minHeight = self.minHeight,
5252
view = this.$el,
5353
viewOffset = utils.getViewportOffset(view),
54-
currentWidth = view.getBoundingClientRect !== 'undefined' ? view.getBoundingClientRect().width : (view.clientWidth + 2),
55-
currentHeight = view.getBoundingClientRect !== 'undefined' ? view.getBoundingClientRect().height : (view.clientHeight + 2),
54+
currentWidth = view.getBoundingClientRect !== 'undefined' ? view.getBoundingClientRect().width : view.clientWidth,
55+
currentHeight = view.getBoundingClientRect !== 'undefined' ? view.getBoundingClientRect().height : view.clientHeight,
5656
right = window.document.documentElement.clientWidth - currentWidth - viewOffset.left,
5757
bottom = window.document.documentElement.clientHeight - currentHeight - viewOffset.top - 2; //
5858

@@ -87,19 +87,19 @@ export default {
8787
// 改变所有需要自适应列的宽度
8888
changeColumnsWidth(currentWidth){
8989

90-
var differ = currentWidth - 2 - this.totalColumnsWidth,
90+
var differ = currentWidth - this.totalColumnsWidth,
9191
initResizeWidths = this.initTotalColumnsWidth,
9292
rightViewBody = this.$el.querySelector('.v-table-rightview .v-table-body'),
9393
rightViewFooter = this.$el.querySelector('.v-table-rightview .v-table-footer');
9494

9595

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

98-
if (this.hasTableFooter){
98+
if (this.hasTableFooter) {
9999

100100
rightViewFooter.style.overflowX = 'scroll';
101101

102-
}else{
102+
} else {
103103

104104
rightViewBody.style.overflowX = 'scroll';
105105
}
@@ -108,13 +108,13 @@ export default {
108108
// 防止最后一列右距中时内容显示不全
109109
if (this.getTotalColumnsHeight() > this.internalHeight) {
110110

111-
differ -= (utils.getScrollbarWidth() + 1);
111+
differ -= utils.getScrollbarWidth();
112112
}
113113

114-
if (this.hasTableFooter){
114+
if (this.hasTableFooter) {
115115

116116
rightViewFooter.style.overflowX = 'hidden';
117-
}else{
117+
} else {
118118

119119
rightViewBody.style.overflowX = 'hidden';
120120
}

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

Lines changed: 21 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,8 @@
9494
<span v-if="cellMergeContentType(rowIndex,col.field,item).isComponent">
9595
<component :rowData="item" :field="col.field ? col.field : ''"
9696
: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>
9899
</span>
99100
<span v-else v-html="cellMerge(rowIndex,item,col.field).content"></span>
100101
</div>
@@ -107,7 +108,8 @@
107108
>
108109
<span v-if="typeof col.componentName ==='string' && col.componentName.length > 0">
109110
<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>
111113
</span>
112114
<span v-else-if="typeof col.formatter==='function'"
113115
v-html="col.formatter(item,rowIndex,pagingIndex,col.field)"></span>
@@ -133,7 +135,8 @@
133135
:style="{'width': leftViewWidth+'px'}">
134136
<table class="v-table-ftable" cellspacing="0" cellpadding="0" border="0">
135137
<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)">
137140
<div :style="{'height':footerRowHeight+'px','line-height':footerRowHeight+'px','width':col.width+'px','text-align':col.align}"
138141
:class="['v-table-body-cell',vTableBodyCell]"
139142
v-html="col.content"></div>
@@ -238,7 +241,8 @@
238241
>
239242
<span v-if="cellMergeContentType(rowIndex,col.field,item).isComponent">
240243
<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>
242246
</span>
243247
<span v-else v-html="cellMerge(rowIndex,item,col.field).content">
244248
</span>
@@ -278,7 +282,8 @@
278282
:style="{'width': rightViewWidth+'px'}">
279283
<table class="v-table-ftable" cellspacing="0" cellpadding="0" border="0">
280284
<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)">
282287
<div :style="{'height':footerRowHeight+'px','line-height':footerRowHeight+'px','width':col.width+'px','text-align':col.align}"
283288
:class="['v-table-body-cell',vTableBodyCell]"
284289
v-html="col.content"></div>
@@ -333,7 +338,7 @@
333338
334339
export default {
335340
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],
337342
components: {tableEmpty, loading, VCheckboxGroup, VCheckbox},
338343
data(){
339344
return {
@@ -489,7 +494,7 @@
489494
require: false,
490495
default: 40
491496
},
492-
columnWidthDrag:{
497+
columnWidthDrag: {
493498
type: Boolean,
494499
default: false
495500
},
@@ -525,14 +530,17 @@
525530
// 左侧区域宽度
526531
leftViewWidth(){
527532
var result = 0
528-
if (this.frozenCols && this.frozenCols.length > 0) {
533+
if (this.hasFrozenColumn) {
529534
result = this.frozenCols.reduce((total, curr) => total + curr.width, 0);
530535
}
531536
return result
532537
},
533538
// 右侧区域宽度
534539
rightViewWidth(){
535-
return this.internalWidth - this.leftViewWidth - 2;
540+
541+
let result = this.internalWidth - this.leftViewWidth;
542+
543+
return this.hasFrozenColumn ? result - 2 : result;
536544
},
537545
538546
// 左侧、右侧区域高度
@@ -546,7 +554,7 @@
546554
547555
if (this.getFooterContainerHeight) {
548556
549-
result -= this.getFooterContainerHeight + 1;
557+
result -= this.getFooterContainerHeight;
550558
}
551559
552560
return result;
@@ -610,7 +618,7 @@
610618
// custom columns component event
611619
customCompFunc(params){
612620
613-
this.$emit('on-custom-comp',params);
621+
this.$emit('on-custom-comp', params);
614622
},
615623
616624
setRowHoverColor(isMouseenter){
@@ -755,7 +763,7 @@
755763
if (self.isHorizontalResize) {
756764
console.error(self.errorMsg + "If you are using the isHorizontalResize property,Please set the value for each column's width");
757765
} else {
758-
item.width = self.internalWidth - self.totalColumnsWidth - 2;
766+
item.width = self.internalWidth - self.totalColumnsWidth;
759767
}
760768
761769
}
@@ -777,7 +785,7 @@
777785
if (!(self.internalWidth && self.internalWidth > 0)) {
778786
779787
if (self.columns && self.columns.length > 0) {
780-
self.internalWidth = self.columns.reduce((total, curr) => total + curr.width, 0) + 2;
788+
self.internalWidth = self.columns.reduce((total, curr) => total + curr.width, 0);
781789
782790
}
783791
}

0 commit comments

Comments
 (0)