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

fixed #2871

Browse source
This commit is contained in:
huanghong 2018-03-21 21:03:32 +08:00
parent c1115edd1a
commit e25070eb84
2 changed files with 145 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> <Table :width='600' border :columns="columns2" :data="data3"></Table>
</div> </div>
<div style='margin:20px 0px'> <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>
<div style='margin:20px 0px;'> <div style='margin:20px 0px;'>
Table scrolling <i-switch v-model="fixedHeader" style="margin-right: 5px"></i-switch> Table scrolling <i-switch v-model="fixedHeader" style="margin-right: 5px"></i-switch>
@ -143,6 +143,14 @@
city: 'Sydney', city: 'Sydney',
zip: 100000 zip: 100000
}, },
{
name: 'Jon Snow',
age: 26,
address: 'Ottawa No. 2 Lake Park',
province: 'Canada',
city: 'Ottawa',
zip: 100000
},
{ {
name: 'Jon Snow', name: 'Jon Snow',
age: 26, age: 26,
@ -152,6 +160,113 @@
zip: 100000 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, fixedHeader: false,
tableData1: [], tableData1: [],

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

@ -47,7 +47,8 @@
:columns-width="columnsWidth" :columns-width="columnsWidth"
:data="rebuildData"></table-head> :data="rebuildData"></table-head>
</div> </div>
<div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" ref="fixedBody"> <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" ref="fixedBody"
@wheel="handleFixedMousewheel">
<table-body <table-body
fixed="left" fixed="left"
:prefix-cls="prefixCls" :prefix-cls="prefixCls"
@ -69,7 +70,8 @@
:columns-width="columnsWidth" :columns-width="columnsWidth"
:data="rebuildData"></table-head> :data="rebuildData"></table-head>
</div> </div>
<div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" ref="fixedRightBody"> <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" ref="fixedRightBody"
@wheel="handleFixedMousewheel">
<table-body <table-body
fixed="right" fixed="right"
:prefix-cls="prefixCls" :prefix-cls="prefixCls"
@ -539,6 +541,31 @@
if (this.isRightFixed) this.$refs.fixedRightBody.scrollTop = event.target.scrollTop; if (this.isRightFixed) this.$refs.fixedRightBody.scrollTop = event.target.scrollTop;
this.hideColumnFilter(); this.hideColumnFilter();
}, },
handleFixedMousewheel(event) {
const deltaY = event.deltaY;
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+=10;
if(deltaY>0){
body.scrollTop += 10;
}
else{
body.scrollTop += -10;
}
if(step>=Math.abs(deltaY)){
clearInterval(timeId);
}
} , 20);
},
handleMouseWheel (event) { handleMouseWheel (event) {
const deltaX = event.deltaX; const deltaX = event.deltaX;
const $body = this.$refs.body; const $body = this.$refs.body;