drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix table changing small scrollbar bug

Browse source
This commit is contained in:
huanghong 2018-03-17 02:16:19 +08:00
parent ebaf3c1d89
commit 14d1de0573
4 changed files with 32 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
examples/routers/table.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<Table border ref="selection" :columns="columns4" :data="data1"></Table> <Table border ref="selection" :columns="columns4" :data="data1" :height='258'></Table>
<Button @click="handleSetData">Set Data</Button> <Button @click="handleSetData">Set Data</Button>
<Button @click="handleClearData">Clear Data</Button> <Button @click="handleClearData">Clear Data</Button>
<Button @click="handleSelectAll(true)">Set all selected</Button> <Button @click="handleSelectAll(true)">Set all selected</Button>
@ -28,7 +28,8 @@
}, },
{ {
title: 'Name', title: 'Name',
key: 'name' key: 'name',
width: 260
}, },
{ {
title: 'Age', title: 'Age',
@ -36,7 +37,13 @@
}, },
{ {
title: 'Address', title: 'Address',
key: 'address' key: 'address',
width: 260
},
{
title: 'Address',
key: 'address',
width: 260
} }
], ],
data1: [ data1: [

4
src/components/table/mixin.js
View file

@ -27,7 +27,7 @@ export default {
// when browser has scrollBar,set a width to resolve scroll position bug // when browser has scrollBar,set a width to resolve scroll position bug
if (width && this.columns.length === index + 1 && top && this.$parent.bodyHeight !== 0) { if (width && this.columns.length === index + 1 && top && this.$parent.bodyHeight !== 0) {
let scrollBarWidth = this.$parent.scrollBarWidth; let scrollBarWidth = this.$parent.scrollBarWidth;
if (!this.$parent.showScrollBar()) scrollBarWidth = 0; if (!this.$parent.showScrollBar) scrollBarWidth = 0;
width += scrollBarWidth; width += scrollBarWidth;
} }
// when fixed type,reset first right fixed column's width // when fixed type,reset first right fixed column's width
@ -35,7 +35,7 @@ export default {
const firstFixedIndex = this.columns.findIndex((col) => col.fixed === 'right'); const firstFixedIndex = this.columns.findIndex((col) => col.fixed === 'right');
if (firstFixedIndex === index) { if (firstFixedIndex === index) {
let scrollBarWidth = this.$parent.scrollBarWidth; let scrollBarWidth = this.$parent.scrollBarWidth;
if (!this.$parent.showScrollBar()) scrollBarWidth = 0; if (!this.$parent.showScrollBar) scrollBarWidth = 0;
width += scrollBarWidth; width += scrollBarWidth;
} }
} }

2
src/components/table/table-head.vue
View file

@ -86,7 +86,7 @@
styles () { styles () {
const style = Object.assign({}, this.styleObject); const style = Object.assign({}, this.styleObject);
let scrollBarWidth = this.$parent.scrollBarWidth; let scrollBarWidth = this.$parent.scrollBarWidth;
if(!this.$parent.showScrollBar()) scrollBarWidth = 0; if(!this.$parent.showScrollBar) scrollBarWidth = 0;
const width = this.$parent.bodyHeight === 0 ? parseInt(this.styleObject.width) : parseInt(this.styleObject.width) + scrollBarWidth; const width = this.$parent.bodyHeight === 0 ? parseInt(this.styleObject.width) : parseInt(this.styleObject.width) + scrollBarWidth;
style.width = `${width}px`; style.width = `${width}px`;
return style; return style;

26
src/components/table/table.vue
View file

@ -186,7 +186,8 @@
bodyRealHeight: 0, bodyRealHeight: 0,
scrollBarWidth: getScrollBarSize(), scrollBarWidth: getScrollBarSize(),
currentContext: this.context, currentContext: this.context,
cloneData: deepCopy(this.data) // when Cell has a button to delete row data, clickCurrentRow will throw an error, so clone a data cloneData: deepCopy(this.data), // when Cell has a button to delete row data, clickCurrentRow will throw an error, so clone a data
showScrollBar:false,
}; };
}, },
computed: { computed: {
@ -338,12 +339,6 @@
rowClsName (index) { rowClsName (index) {
return this.rowClassName(this.data[index], index); return this.rowClassName(this.data[index], index);
}, },
showScrollBar () {
if (!this.$refs.tbody) return false;
let bodyContent = this.$refs.tbody.$el;
let bodyContentHeight = parseInt(getStyle(bodyContent, 'height'));
return this.bodyHeight? this.bodyHeight < bodyContentHeight : false;
},
handleResize () { handleResize () {
this.$nextTick(() => { this.$nextTick(() => {
const allWidth = !this.columns.some(cell => !cell.width); // each column set a width const allWidth = !this.columns.some(cell => !cell.width); // each column set a width
@ -381,6 +376,23 @@
} }
this.columnsWidth = columnsWidth; this.columnsWidth = columnsWidth;
this.fixedHeader(); this.fixedHeader();
if (this.$refs.tbody) {
let bodyContent = this.$refs.tbody.$el;
let className = bodyContent.parentElement.className;
bodyContent.parentElement.className = '';
let bodyContentHeight = bodyContent.offsetHeight;
let bodyContentWidth = bodyContent.offsetWidth;
bodyContent.parentElement.className = className;
let bodyWidth = this.$refs.tbody.$el.parentElement.offsetWidth;
let bodyHeight = this.$refs.tbody.$el.parentElement.offsetHeight;
let scrollBarWidth = 0;
if (bodyWidth < bodyContentWidth) {
scrollBarWidth = this.scrollBarWidth;
}
let show = this.bodyHeight? bodyHeight - scrollBarWidth < bodyContentHeight : false;
this.showScrollBar = show;
}
} }
}); });
// get table real height,for fixed when set height prop,but height < table's height,show scrollBarWidth // get table real height,for fixed when set height prop,but height < table's height,show scrollBarWidth