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

fixed table scrollbar bug

Browse source
This commit is contained in:
huanghong 2018-03-16 21:17:33 +08:00
parent 6bc3b19f22
commit 47638ad84a
4 changed files with 38 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

23
examples/routers/table.vue
View file

@ -1,3 +1,17 @@
<style>
.table{
margin:20px 0px;
}
.table .iview-table-cell{
padding-left: 2px !important;
padding-right: 2px !important;
}
.table .iview-table-small td {
height: 30px !important;
}
</style>
<template>
<div>
<Table border ref="selection" :columns="columns4" :data="data1"></Table>
@ -5,8 +19,9 @@
<Button @click="handleClearData">Clear Data</Button>
<Button @click="handleSelectAll(true)">Set all selected</Button>
<Button @click="handleSelectAll(false)">Cancel all selected</Button>
<div style="margin:20px 0px;">
<Table :data="tableData1" :columns="tableColumns1" style="width: 100%;" stripe></Table>
<div class="table1">
<Table :data="tableData1" :columns="tableColumns1" :height='500' stripe size='small'></Table>
<div style="margin: 10px;overflow: hidden">
<div style="float: right;">
<Page :total="100" show-sizer :current="1" @on-change="changePage"></Page>
@ -65,7 +80,7 @@
key: 'data5'
},
{
title: 'Data6',
title: '一二三四一二三四一二三四一二三四',
key: 'data6'
},
]
@ -118,7 +133,7 @@
data3: Math.floor(Math.random () * 100000000),
data4: Math.floor(Math.random () * Math.random () * 10000),
data5: Math.floor(Math.random () * Math.random () * 1000000),
data6: Math.floor(Math.random () * Math.random () * 100000000),
data6: ''+Math.floor(Math.random () * Math.random () * 100000000)+Math.floor(Math.random () * 100000000)+Math.floor(Math.random () * 100000000),
});
}
this.tableData1 = data;

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

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

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

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

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

@ -338,6 +338,12 @@
rowClsName (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 () {
this.$nextTick(() => {
const allWidth = !this.columns.some(cell => !cell.width); // each column set a width
@ -374,6 +380,7 @@
};
}
this.columnsWidth = columnsWidth;
this.fixedHeader();
}
});
// get table real height,for fixed when set height prop,but height < table's height,show scrollBarWidth
@ -478,6 +485,7 @@
}
this.$emit('on-selection-change', selection);
},
fixedHeader () {
if (this.height) {
this.$nextTick(() => {