Commit e25070eb84ced97269b66032ccde9c3251ba8696

Authored by huanghong
1 parent c1115edd

fixed #2871

Showing 2 changed files with 145 additions and 3 deletions   Show diff stats
examples/routers/table.vue
... ... @@ -15,7 +15,7 @@
15 15 <Table :width='600' border :columns="columns2" :data="data3"></Table>
16 16 </div>
17 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 19 </div>
20 20 <div style='margin:20px 0px;'>
21 21 Table scrolling <i-switch v-model="fixedHeader" style="margin-right: 5px"></i-switch>
... ... @@ -150,9 +150,124 @@
150 150 province: 'Canada',
151 151 city: 'Ottawa',
152 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 271 fixedHeader: false,
157 272 tableData1: [],
158 273 tableColumns1: [
... ...
src/components/table/table.vue
... ... @@ -47,7 +47,8 @@
47 47 :columns-width="columnsWidth"
48 48 :data="rebuildData"></table-head>
49 49 </div>
50   - <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" ref="fixedBody">
  50 + <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" ref="fixedBody"
  51 + @wheel="handleFixedMousewheel">
51 52 <table-body
52 53 fixed="left"
53 54 :prefix-cls="prefixCls"
... ... @@ -69,7 +70,8 @@
69 70 :columns-width="columnsWidth"
70 71 :data="rebuildData"></table-head>
71 72 </div>
72   - <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" ref="fixedRightBody">
  73 + <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" ref="fixedRightBody"
  74 + @wheel="handleFixedMousewheel">
73 75 <table-body
74 76 fixed="right"
75 77 :prefix-cls="prefixCls"
... ... @@ -539,6 +541,31 @@
539 541 if (this.isRightFixed) this.$refs.fixedRightBody.scrollTop = event.target.scrollTop;
540 542 this.hideColumnFilter();
541 543 },
  544 + handleFixedMousewheel(event) {
  545 + const deltaY = event.deltaY;
  546 + const body = this.$refs.body;
  547 + const currentScrollTop = body.scrollTop;
  548 + if (deltaY < 0 && currentScrollTop !== 0) {
  549 + event.preventDefault();
  550 + }
  551 + if (deltaY > 0 && body.scrollHeight - body.clientHeight > currentScrollTop) {
  552 + event.preventDefault();
  553 + }
  554 + //body.scrollTop += deltaY;
  555 + let step = 0;
  556 + let timeId = setInterval(()=>{
  557 + step+=10;
  558 + if(deltaY>0){
  559 + body.scrollTop += 10;
  560 + }
  561 + else{
  562 + body.scrollTop += -10;
  563 + }
  564 + if(step>=Math.abs(deltaY)){
  565 + clearInterval(timeId);
  566 + }
  567 + } , 20);
  568 + },
542 569 handleMouseWheel (event) {
543 570 const deltaX = event.deltaX;
544 571 const $body = this.$refs.body;
... ...