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

Merge pull request #3207 from huanghong1125/2.0

Browse source 
Table fixed columns support mouse scroll
This commit is contained in:
Aresn 2018-03-22 10:33:03 +08:00 • committed by GitHub
commit dac3df9242
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 153 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

117
examples/routers/table.vue
View file

@ -15,7 +15,7 @@
<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>
<Table :width='600' :height='200' border :columns="columns2" :data="data31"></Table>
</div>
<div style='margin:20px 0px;'>
Table scrolling <i-switch v-model="fixedHeader" style="margin-right: 5px"></i-switch>
@ -143,6 +143,14 @@
city: 'Sydney',
zip: 100000
},
{
name: 'Jon Snow',
age: 26,
address: 'Ottawa No. 2 Lake Park',
province: 'Canada',
city: 'Ottawa',
zip: 100000
},
{
name: 'Jon Snow',
age: 26,
@ -152,6 +160,113 @@
zip: 100000
}
],
data31: [
{
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
},
{
name: 'Jon Snow',
age: 26,
address: 'Ottawa No. 2 Lake Park',
province: 'Canada',
city: 'Ottawa',
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
},
{
name: 'Jon Snow',
age: 26,
address: 'Ottawa No. 2 Lake Park',
province: 'Canada',
city: 'Ottawa',
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
},
{
name: 'Jon Snow',
age: 26,
address: 'Ottawa No. 2 Lake Park',
province: 'Canada',
city: 'Ottawa',
zip: 100000
}
],
fixedHeader: false,
tableData1: [],

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

@ -47,7 +47,7 @@
:columns-width="columnsWidth"
:data="rebuildData"></table-head>
</div>
<div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" ref="fixedBody">
<div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" ref="fixedBody" @mousewheel="handleFixedMousewheel" @DOMMouseScroll="handleFixedMousewheel">
<table-body
fixed="left"
:prefix-cls="prefixCls"
@ -69,7 +69,7 @@
:columns-width="columnsWidth"
:data="rebuildData"></table-head>
</div>
<div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" ref="fixedRightBody">
<div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" ref="fixedRightBody"@mousewheel="handleFixedMousewheel" @DOMMouseScroll="handleFixedMousewheel">
<table-body
fixed="right"
:prefix-cls="prefixCls"
@ -539,6 +539,41 @@
if (this.isRightFixed) this.$refs.fixedRightBody.scrollTop = event.target.scrollTop;
this.hideColumnFilter();
},
handleFixedMousewheel(event) {
let deltaY = event.deltaY;
if(!deltaY && event.detail){
deltaY = event.detail * 40;
}
if(!deltaY && event.wheelDeltaY){
deltaY = -event.wheelDeltaY;
}
if(!deltaY && event.wheelDelta){
deltaY = -event.wheelDelta;
}
if(!deltaY) return;
const body = this.$refs.body;
const currentScrollTop = body.scrollTop;
if (deltaY < 0 && currentScrollTop !== 0) {
event.preventDefault();
}
if (deltaY > 0 && body.scrollHeight - body.clientHeight > currentScrollTop) {
event.preventDefault();
}
//body.scrollTop += deltaY;
let step = 0;
let timeId = setInterval(()=>{
step += 5;
if(deltaY>0){
body.scrollTop += 2;
}
else{
body.scrollTop -= 2;
}
if(step >= Math.abs(deltaY)){
clearInterval(timeId);
}
}, 5);
},
handleMouseWheel (event) {
const deltaX = event.deltaX;
const $body = this.$refs.body;