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

Merge pull request #3178 from huanghong1125/2.0

Browse source 
fixed table scrollbar bug
This commit is contained in:
Aresn 2018-03-21 16:45:01 +08:00 • committed by GitHub
commit a00e989ba3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 203 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

128
examples/routers/table.vue
View file

@ -1,18 +1,32 @@
<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>
<Button @click="handleSelectAll(false)">Cancel all selected</Button> <Button @click="handleSelectAll(false)">Cancel all selected</Button>
<div style="margin:20px 0px;"> <div style='margin:20px 0px'>
<Table :data="tableData1" :columns="tableColumns1" style="width: 100%;" stripe></Table> <Table border :columns="columns2" :data="data3"></Table>
</div>
<div style='margin:20px 0px'>
<Table :height='200' border :columns="columns2" :data="data3"></Table>
</div>
<div style='margin:20px 0px'>
<Table :width='600' border :columns="columns2" :data="data3"></Table>
</div>
<div style='margin:20px 0px'>
<Table :width='600' :height='200' border :columns="columns2" :data="data3"></Table>
</div>
<div style='margin:20px 0px;'>
Table scrolling <i-switch v-model="fixedHeader" style="margin-right: 5px"></i-switch>
<Table :data="tableData1" :columns="tableColumns1" :height="fixedHeader ? 250 : ''" stripe size='small'></Table>
<div style="margin: 10px;overflow: hidden"> <div style="margin: 10px;overflow: hidden">
<div style="float: right;"> <div style="float: right;">
<Page :total="100" show-sizer :current="1" @on-change="changePage"></Page> <Page :total="100" show-sizer :current="1" @on-change="changePage"></Page>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
@ -27,7 +41,8 @@
}, },
{ {
title: 'Name', title: 'Name',
key: 'name' key: 'name',
width: 260
}, },
{ {
title: 'Age', title: 'Age',
@ -35,13 +50,110 @@
}, },
{ {
title: 'Address', title: 'Address',
key: 'address' key: 'address',
width: 260
},
{
title: 'Address',
key: 'address',
width: 260
} }
], ],
data1: [ data1: [
], ],
columns2: [
{
title: 'Name',
key: 'name',
width: 100,
fixed: 'left'
},
{
title: 'Age',
key: 'age',
width: 100
},
{
title: 'Province',
key: 'province',
width: 100
},
{
title: 'City',
key: 'city',
width: 100
},
{
title: 'Address',
key: 'address',
width: 200
},
{
title: 'Postcode',
key: 'zip',
width: 100,
fixed: 'right',
},
{
title: 'Action',
key: 'action',
fixed: 'right',
width: 120,
render: (h, params) => {
return h('div', [
h('Button', {
props: {
type: 'text',
size: 'small'
}
}, 'View'),
h('Button', {
props: {
type: 'text',
size: 'small'
}
}, 'Edit')
]);
}
}
],
data3: [
{
name: 'John Brown',
age: 18,
address: 'New York No. 1 Lake Park',
province: 'America',
city: 'New York',
zip: 100000
},
{
name: 'Jim Green',
age: 24,
address: 'Washington, D.C. No. 1 Lake Park',
province: 'America',
city: 'Washington, D.C.',
zip: 100000
},
{
name: 'Joe Black',
age: 30,
address: 'Sydney No. 1 Lake Park',
province: 'Australian',
city: 'Sydney',
zip: 100000
},
{
name: 'Jon Snow',
age: 26,
address: 'Ottawa No. 2 Lake Park',
province: 'Canada',
city: 'Ottawa',
zip: 100000
}
],
fixedHeader: false,
tableData1: [], tableData1: [],
tableColumns1: [ tableColumns1: [
{ {
@ -65,7 +177,7 @@
key: 'data5' key: 'data5'
}, },
{ {
title: 'Data6', title: 'Data6Data6Data6Data6Data6Data6Data6Data6Data6Data6Data6',
key: 'data6' key: 'data6'
}, },
] ]
@ -118,7 +230,7 @@
data3: Math.floor(Math.random () * 100000000), data3: Math.floor(Math.random () * 100000000),
data4: Math.floor(Math.random () * Math.random () * 10000), data4: Math.floor(Math.random () * Math.random () * 10000),
data5: Math.floor(Math.random () * Math.random () * 1000000), 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; this.tableData1 = data;

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

@ -25,13 +25,19 @@ export default {
width = this.columnsWidth[column._index].width; width = this.columnsWidth[column._index].width;
} }
// 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 && column.fixed!=='left' && !this.fixed) {
width += this.$parent.scrollBarWidth; let scrollBarWidth = this.$parent.scrollBarWidth;
if (!this.$parent.showVerticalScrollBar) scrollBarWidth = 0;
width += scrollBarWidth;
} }
// when fixed type,reset first right fixed column's width // when fixed type,reset first right fixed column's width
if (this.fixed === 'right') { if (this.fixed === 'right' && top ) {
const firstFixedIndex = this.columns.findIndex((col) => col.fixed === 'right'); //const firstFixedIndex = this.columns.findIndex((col) => col.fixed === 'right');
if (firstFixedIndex === index) width += this.$parent.scrollBarWidth; if (this.columns.length === index + 1) {
let scrollBarWidth = this.$parent.scrollBarWidth;
if (!this.$parent.showVerticalScrollBar) scrollBarWidth = 0;
width += scrollBarWidth;
}
} }
if (width === '0') width = ''; if (width === '0') width = '';
return width; return width;

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

@ -87,7 +87,12 @@
computed: { computed: {
styles () { styles () {
const style = Object.assign({}, this.styleObject); 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.showVerticalScrollBar) scrollBarWidth = 0;
let isLeftFixed = this.$el && this.$el.parentElement.className.indexOf('fixed-header')>0;
if(isLeftFixed) scrollBarWidth = 0;
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;
}, },

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

@ -23,12 +23,12 @@
:obj-data="objData"></table-body> :obj-data="objData"></table-body>
</div> </div>
<div <div
:class="[prefixCls + '-tip']" :class="[prefixCls + '-tip']" :style="bodyStyle" @scroll="handleBodyScroll"
v-show="((!!localeNoDataText && (!data || data.length === 0)) || (!!localeNoFilteredDataText && (!rebuildData || rebuildData.length === 0)))"> v-show="((!!localeNoDataText && (!data || data.length === 0)) || (!!localeNoFilteredDataText && (!rebuildData || rebuildData.length === 0)))">
<table cellspacing="0" cellpadding="0" border="0"> <table cellspacing="0" cellpadding="0" border="0">
<tbody> <tbody>
<tr> <tr>
<td :style="{ 'height': bodyStyle.height }"> <td :style="{'height':bodyStyle.height,'width':`${this.headerWidth}px`}">
<span v-html="localeNoDataText" v-if="!data || data.length === 0"></span> <span v-html="localeNoDataText" v-if="!data || data.length === 0"></span>
<span v-html="localeNoFilteredDataText" v-else></span> <span v-html="localeNoFilteredDataText" v-else></span>
</td> </td>
@ -186,7 +186,10 @@
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
showVerticalScrollBar:false,
showHorizontalScrollBar:false,
headerWidth:0
}; };
}, },
computed: { computed: {
@ -252,7 +255,7 @@
if (this.bodyHeight > this.bodyRealHeight) { if (this.bodyHeight > this.bodyRealHeight) {
width = this.tableWidth; width = this.tableWidth;
} else { } else {
width = this.tableWidth - this.scrollBarWidth; width = this.tableWidth - (this.showVerticalScrollBar?this.scrollBarWidth:0);
} }
} }
// const width = this.bodyHeight === 0 ? this.tableWidth : this.tableWidth - this.scrollBarWidth; // const width = this.bodyHeight === 0 ? this.tableWidth : this.tableWidth - this.scrollBarWidth;
@ -275,8 +278,9 @@
this.rightFixedColumns.forEach((col) => { this.rightFixedColumns.forEach((col) => {
if (col.fixed && col.fixed === 'right') width += col._width; if (col.fixed && col.fixed === 'right') width += col._width;
}); });
width += this.scrollBarWidth; //width += this.scrollBarWidth;
style.width = `${width}px`; style.width = `${width}px`;
style.right = `${this.showVerticalScrollBar?this.scrollBarWidth:0}px`;
return style; return style;
}, },
bodyStyle () { bodyStyle () {
@ -291,11 +295,11 @@
fixedBodyStyle () { fixedBodyStyle () {
let style = {}; let style = {};
if (this.bodyHeight !== 0) { if (this.bodyHeight !== 0) {
let height = this.bodyHeight + this.scrollBarWidth - 1; let height = this.bodyHeight + (!this.showHorizontalScrollBar?this.scrollBarWidth:0) - 1;
// #2102 里，如果 Table 没有设置 width，而是集成父级的 width，固定列也应该不包含滚动条高度，所以这里直接计算表格宽度 // #2102 里，如果 Table 没有设置 width，而是集成父级的 width，固定列也应该不包含滚动条高度，所以这里直接计算表格宽度
const tableWidth = parseInt(getStyle(this.$el, 'width')) - 1; const tableWidth = parseInt(getStyle(this.$el, 'width')) - 1;
if ((this.width && this.width < this.tableWidth) || tableWidth < this.tableWidth){ if ((this.width && this.width < this.tableWidth) || tableWidth < this.tableWidth+(this.showVerticalScrollBar?this.scrollBarWidth:0)){
height = this.bodyHeight; height = this.bodyHeight;
} }
// style.height = this.scrollBarWidth > 0 ? `${this.bodyHeight}px` : `${this.bodyHeight - 1}px`; // style.height = this.scrollBarWidth > 0 ? `${this.bodyHeight}px` : `${this.bodyHeight - 1}px`;
@ -310,7 +314,7 @@
if (col.fixed && col.fixed === 'left') { if (col.fixed && col.fixed === 'left') {
left.push(col); left.push(col);
} else { } else {
other.push(col); //other.push(col);
} }
}); });
return left.concat(other); return left.concat(other);
@ -322,7 +326,7 @@
if (col.fixed && col.fixed === 'right') { if (col.fixed && col.fixed === 'right') {
right.push(col); right.push(col);
} else { } else {
other.push(col); //other.push(col);
} }
}); });
return right.concat(other); return right.concat(other);
@ -347,7 +351,13 @@
this.tableWidth = parseInt(getStyle(this.$el, 'width')) - 1; this.tableWidth = parseInt(getStyle(this.$el, 'width')) - 1;
} }
this.columnsWidth = {}; this.columnsWidth = {};
if (!this.$refs.tbody) return; this.$nextTick(()=>{
this.headerWidth = this.$refs.header.childNodes[0].offsetWidth;
if (!this.$refs.tbody) {
this.showVerticalScrollBar = false;
return;
}
});
this.$nextTick(() => { this.$nextTick(() => {
let columnsWidth = {}; let columnsWidth = {};
let autoWidthIndex = -1; let autoWidthIndex = -1;
@ -357,7 +367,6 @@
const $tr = this.$refs.tbody.$el.querySelectorAll('tbody tr'); const $tr = this.$refs.tbody.$el.querySelectorAll('tbody tr');
if ($tr.length === 0) return; if ($tr.length === 0) return;
const $td = $tr[0].children; const $td = $tr[0].children;
for (let i = 0; i < $td.length; i++) { // can not use forEach in Firefox for (let i = 0; i < $td.length; i++) { // can not use forEach in Firefox
const column = this.cloneColumns[i]; const column = this.cloneColumns[i];
@ -374,6 +383,36 @@
}; };
} }
this.columnsWidth = columnsWidth; this.columnsWidth = columnsWidth;
this.$nextTick(()=>{
this.fixedHeader();
if (this.$refs.tbody) {
let bodyContentEl = this.$refs.tbody.$el;
let bodyEl = bodyContentEl.parentElement;
let bodyContentHeight = bodyContentEl.offsetHeight;
let bodyContentWidth = bodyContentEl.offsetWidth;
let bodyWidth = bodyEl.offsetWidth;
let bodyHeight = bodyEl.offsetHeight;
let scrollBarWidth = 0;
if (bodyWidth < bodyContentWidth + (bodyHeight<bodyContentHeight?this.scrollBarWidth : 0)) {
scrollBarWidth = this.scrollBarWidth;
}
this.showVerticalScrollBar = this.bodyHeight? bodyHeight - scrollBarWidth < bodyContentHeight : false;
this.showHorizontalScrollBar = bodyWidth < bodyContentWidth + (this.showVerticalScrollBar?this.scrollBarWidth:0);
if(this.showVerticalScrollBar){
bodyEl.classList.add(this.prefixCls +'-overflowY');
}else{
bodyEl.classList.remove(this.prefixCls +'-overflowY');
}
if(this.showHorizontalScrollBar){
bodyEl.classList.add(this.prefixCls +'-overflowX');
}else{
bodyEl.classList.remove(this.prefixCls +'-overflowX');
}
}
});
} }
}); });
// 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
@ -478,6 +517,7 @@
} }
this.$emit('on-selection-change', selection); this.$emit('on-selection-change', selection);
}, },
fixedHeader () { fixedHeader () {
if (this.height) { if (this.height) {
this.$nextTick(() => { this.$nextTick(() => {
@ -795,6 +835,7 @@
deep: true deep: true
}, },
height () { height () {
this.handleResize();
this.fixedHeader(); this.fixedHeader();
} }
} }

16
src/styles/components/table.less
View file

@ -71,7 +71,19 @@
overflow: hidden; overflow: hidden;
} }
&-body{ &-body{
overflow: auto; //overflow: auto;
//position: relative;
}
&-overflowX{
overflow-x: scroll;
}
&-overflowY{
overflow-y: scroll;
}
&-tip{
overflow-x: auto;
overflow-y: hidden;
//position: relative; //position: relative;
} }
@ -273,7 +285,7 @@
box-shadow: -2px 0 6px -2px rgba(0, 0, 0, 0.2); box-shadow: -2px 0 6px -2px rgba(0, 0, 0, 0.2);
} }
&-fixed-header{ &-fixed-header{
overflow: hidden; overflow: visible;
&-with-empty{ &-with-empty{
.@{table-prefix-cls}-hidden{ .@{table-prefix-cls}-hidden{
.@{table-prefix-cls}-sort{ .@{table-prefix-cls}-sort{