chenhaodong / mew-iview

Commit dac3df92422b513241ef47326afe4c294eae256a

Authored by Aresn
Committed by GitHub
2 parents 1deb706a a796b2c5

Merge pull request #3207 from huanghong1125/2.0 

Table fixed columns support mouse scroll
Showing 2 changed files with 153 additions and 3 deletions   Show diff stats
Inline Side-by-side
examples/routers/table.vue
  Show/Hide comments   View file @dac3df9
@@ -15,7 +15,7 @@ @@ -15,7 +15,7 @@
15 <Table :width='600' border :columns="columns2" :data="data3"></Table> 15 <Table :width='600' border :columns="columns2" :data="data3"></Table>
16 </div> 16 </div>
17 <div style='margin:20px 0px'> 17 <div style='margin:20px 0px'>
18 - <Table :width='600' :height='200' border :columns="columns2" :data="data3"></Table> 18 + <Table :width='600' :height='200' border :columns="columns2" :data="data31"></Table>
19 </div> 19 </div>
20 <div style='margin:20px 0px;'> 20 <div style='margin:20px 0px;'>
21 Table scrolling <i-switch v-model="fixedHeader" style="margin-right: 5px"></i-switch> 21 Table scrolling <i-switch v-model="fixedHeader" style="margin-right: 5px"></i-switch>
@@ -150,9 +150,124 @@ @@ -150,9 +150,124 @@
150 province: 'Canada', 150 province: 'Canada',
151 city: 'Ottawa', 151 city: 'Ottawa',
152 zip: 100000 152 zip: 100000
  153 + },
  154 + {
  155 + name: 'Jon Snow',
  156 + age: 26,
  157 + address: 'Ottawa No. 2 Lake Park',
  158 + province: 'Canada',
  159 + city: 'Ottawa',
  160 + zip: 100000
  161 + }
  162 + ],
  163 + data31: [
  164 + {
  165 + name: 'John Brown',
  166 + age: 18,
  167 + address: 'New York No. 1 Lake Park',
  168 + province: 'America',
  169 + city: 'New York',
  170 + zip: 100000
  171 + },
  172 + {
  173 + name: 'Jim Green',
  174 + age: 24,
  175 + address: 'Washington, D.C. No. 1 Lake Park',
  176 + province: 'America',
  177 + city: 'Washington, D.C.',
  178 + zip: 100000
  179 + },
  180 + {
  181 + name: 'Joe Black',
  182 + age: 30,
  183 + address: 'Sydney No. 1 Lake Park',
  184 + province: 'Australian',
  185 + city: 'Sydney',
  186 + zip: 100000
  187 + },
  188 + {
  189 + name: 'Jon Snow',
  190 + age: 26,
  191 + address: 'Ottawa No. 2 Lake Park',
  192 + province: 'Canada',
  193 + city: 'Ottawa',
  194 + zip: 100000
  195 + },
  196 + {
  197 + name: 'Jon Snow',
  198 + age: 26,
  199 + address: 'Ottawa No. 2 Lake Park',
  200 + province: 'Canada',
  201 + city: 'Ottawa',
  202 + zip: 100000
  203 + },
  204 + {
  205 + name: 'Jim Green',
  206 + age: 24,
  207 + address: 'Washington, D.C. No. 1 Lake Park',
  208 + province: 'America',
  209 + city: 'Washington, D.C.',
  210 + zip: 100000
  211 + },
  212 + {
  213 + name: 'Joe Black',
  214 + age: 30,
  215 + address: 'Sydney No. 1 Lake Park',
  216 + province: 'Australian',
  217 + city: 'Sydney',
  218 + zip: 100000
  219 + },
  220 + {
  221 + name: 'Jon Snow',
  222 + age: 26,
  223 + address: 'Ottawa No. 2 Lake Park',
  224 + province: 'Canada',
  225 + city: 'Ottawa',
  226 + zip: 100000
  227 + },
  228 + {
  229 + name: 'Jon Snow',
  230 + age: 26,
  231 + address: 'Ottawa No. 2 Lake Park',
  232 + province: 'Canada',
  233 + city: 'Ottawa',
  234 + zip: 100000
  235 + },
  236 + {
  237 + name: 'Jim Green',
  238 + age: 24,
  239 + address: 'Washington, D.C. No. 1 Lake Park',
  240 + province: 'America',
  241 + city: 'Washington, D.C.',
  242 + zip: 100000
  243 + },
  244 + {
  245 + name: 'Joe Black',
  246 + age: 30,
  247 + address: 'Sydney No. 1 Lake Park',
  248 + province: 'Australian',
  249 + city: 'Sydney',
  250 + zip: 100000
  251 + },
  252 + {
  253 + name: 'Jon Snow',
  254 + age: 26,
  255 + address: 'Ottawa No. 2 Lake Park',
  256 + province: 'Canada',
  257 + city: 'Ottawa',
  258 + zip: 100000
  259 + },
  260 + {
  261 + name: 'Jon Snow',
  262 + age: 26,
  263 + address: 'Ottawa No. 2 Lake Park',
  264 + province: 'Canada',
  265 + city: 'Ottawa',
  266 + zip: 100000
153 } 267 }
154 ], 268 ],
155 269
  270 +
156 fixedHeader: false, 271 fixedHeader: false,
157 tableData1: [], 272 tableData1: [],
158 tableColumns1: [ 273 tableColumns1: [
src/components/table/table.vue
  Show/Hide comments   View file @dac3df9
@@ -47,7 +47,7 @@ @@ -47,7 +47,7 @@
47 :columns-width="columnsWidth" 47 :columns-width="columnsWidth"
48 :data="rebuildData"></table-head> 48 :data="rebuildData"></table-head>
49 </div> 49 </div>
50 - <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" ref="fixedBody"> 50 + <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" ref="fixedBody" @mousewheel="handleFixedMousewheel" @DOMMouseScroll="handleFixedMousewheel">
51 <table-body 51 <table-body
52 fixed="left" 52 fixed="left"
53 :prefix-cls="prefixCls" 53 :prefix-cls="prefixCls"
@@ -69,7 +69,7 @@ @@ -69,7 +69,7 @@
69 :columns-width="columnsWidth" 69 :columns-width="columnsWidth"
70 :data="rebuildData"></table-head> 70 :data="rebuildData"></table-head>
71 </div> 71 </div>
72 - <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" ref="fixedRightBody"> 72 + <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" ref="fixedRightBody"@mousewheel="handleFixedMousewheel" @DOMMouseScroll="handleFixedMousewheel">
73 <table-body 73 <table-body
74 fixed="right" 74 fixed="right"
75 :prefix-cls="prefixCls" 75 :prefix-cls="prefixCls"
@@ -539,6 +539,41 @@ @@ -539,6 +539,41 @@
539 if (this.isRightFixed) this.$refs.fixedRightBody.scrollTop = event.target.scrollTop; 539 if (this.isRightFixed) this.$refs.fixedRightBody.scrollTop = event.target.scrollTop;
540 this.hideColumnFilter(); 540 this.hideColumnFilter();
541 }, 541 },
  542 + handleFixedMousewheel(event) {
  543 + let deltaY = event.deltaY;
  544 + if(!deltaY && event.detail){
  545 + deltaY = event.detail * 40;
  546 + }
  547 + if(!deltaY && event.wheelDeltaY){
  548 + deltaY = -event.wheelDeltaY;
  549 + }
  550 + if(!deltaY && event.wheelDelta){
  551 + deltaY = -event.wheelDelta;
  552 + }
  553 + if(!deltaY) return;
  554 + const body = this.$refs.body;
  555 + const currentScrollTop = body.scrollTop;
  556 + if (deltaY < 0 && currentScrollTop !== 0) {
  557 + event.preventDefault();
  558 + }
  559 + if (deltaY > 0 && body.scrollHeight - body.clientHeight > currentScrollTop) {
  560 + event.preventDefault();
  561 + }
  562 + //body.scrollTop += deltaY;
  563 + let step = 0;
  564 + let timeId = setInterval(()=>{
  565 + step += 5;
  566 + if(deltaY>0){
  567 + body.scrollTop += 2;
  568 + }
  569 + else{
  570 + body.scrollTop -= 2;
  571 + }
  572 + if(step >= Math.abs(deltaY)){
  573 + clearInterval(timeId);
  574 + }
  575 + }, 5);
  576 + },
542 handleMouseWheel (event) { 577 handleMouseWheel (event) {
543 const deltaX = event.deltaX; 578 const deltaX = event.deltaX;
544 const $body = this.$refs.body; 579 const $body = this.$refs.body;