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 | 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; | ... | ... |