Commit e25070eb84ced97269b66032ccde9c3251ba8696
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,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
| @@ -47,7 +47,8 @@ | @@ -47,7 +47,8 @@ | ||
| 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" |
| 51 | + @wheel="handleFixedMousewheel"> | ||
| 51 | <table-body | 52 | <table-body |
| 52 | fixed="left" | 53 | fixed="left" |
| 53 | :prefix-cls="prefixCls" | 54 | :prefix-cls="prefixCls" |
| @@ -69,7 +70,8 @@ | @@ -69,7 +70,8 @@ | ||
| 69 | :columns-width="columnsWidth" | 70 | :columns-width="columnsWidth" |
| 70 | :data="rebuildData"></table-head> | 71 | :data="rebuildData"></table-head> |
| 71 | </div> | 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 | <table-body | 75 | <table-body |
| 74 | fixed="right" | 76 | fixed="right" |
| 75 | :prefix-cls="prefixCls" | 77 | :prefix-cls="prefixCls" |
| @@ -539,6 +541,31 @@ | @@ -539,6 +541,31 @@ | ||
| 539 | if (this.isRightFixed) this.$refs.fixedRightBody.scrollTop = event.target.scrollTop; | 541 | if (this.isRightFixed) this.$refs.fixedRightBody.scrollTop = event.target.scrollTop; |
| 540 | this.hideColumnFilter(); | 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 | handleMouseWheel (event) { | 569 | handleMouseWheel (event) { |
| 543 | const deltaX = event.deltaX; | 570 | const deltaX = event.deltaX; |
| 544 | const $body = this.$refs.body; | 571 | const $body = this.$refs.body; |