fix table fixed-right header

This commit is contained in:
huanghong 2018-03-27 00:07:27 +08:00
parent a0f489478b
commit 6301418975
4 changed files with 42 additions and 4 deletions

View file

@ -32,8 +32,17 @@ export default {
}
// when fixed type,reset first right fixed column's width
if (this.fixed === 'right' && top ) {
//const firstFixedIndex = this.columns.findIndex((col) => col.fixed === 'right');
if (this.columns.length === index + 1) {
//const firstFixedIndex = this.columns.lastIndexOf((col) => col.fixed === 'right');
let lastFixedIndex = -1;
for(let i=0;i<this.columns.length;i++){
if(this.columns[i].fixed==='right'){
lastFixedIndex = i;
}
else{
break;
}
}
if (lastFixedIndex === index) {
let scrollBarWidth = this.$parent.scrollBarWidth;
if (!this.$parent.showVerticalScrollBar) scrollBarWidth = 0;
width += scrollBarWidth;

View file

@ -85,6 +85,7 @@
:obj-data="objData"></table-body>
</div>
</div>
<div :class="[prefixCls + '-fixed-right-header']" :style="fixedRightHeaderStyle" v-if="isRightFixed"></div>
<div :class="[prefixCls + '-footer']" v-if="showSlotFooter" ref="footer"><slot name="footer"></slot></div>
</div>
<Spin fix size="large" v-if="loading">
@ -199,7 +200,8 @@
cloneData: deepCopy(this.data), // when Cell has a button to delete row data, clickCurrentRow will throw an error, so clone a data
showVerticalScrollBar:false,
showHorizontalScrollBar:false,
headerWidth:0
headerWidth:0,
headerHeight:0,
};
},
computed: {
@ -293,6 +295,17 @@
style.right = `${this.showVerticalScrollBar?this.scrollBarWidth:0}px`;
return style;
},
fixedRightHeaderStyle () {
let style = {};
let width = 0;
let height = this.headerHeight+1;
if(this.showVerticalScrollBar){
width = this.scrollBarWidth;
}
style.width = `${width}px`;
style.height = `${height}px`;
return style;
},
bodyStyle () {
let style = {};
if (this.bodyHeight !== 0) {
@ -345,6 +358,7 @@
this.columnsWidth = {};
this.$nextTick(()=>{
this.headerWidth = this.$refs.header.childNodes[0].offsetWidth;
this.headerHeight = this.$refs.header.childNodes[0].offsetHeight;
if (!this.$refs.tbody) {
this.showVerticalScrollBar = false;
return;