Commit 9f853e3ec898d605f2c16d3e456eaf41509cdee3
1 parent
cb31ede0
update Table
update Table
Showing
2 changed files
with
33 additions
and
23 deletions
Show diff stats
src/components/table/table.vue
| ... | ... | @@ -321,39 +321,35 @@ |
| 321 | 321 | $body.scrollLeft = $body.scrollLeft - 10; |
| 322 | 322 | } |
| 323 | 323 | }, |
| 324 | + sortData (data, type, index) { | |
| 325 | + const key = this.cloneColumns[index].key; | |
| 326 | + data.sort((a, b) => { | |
| 327 | + if (this.cloneColumns[index].sortMethod) { | |
| 328 | + return this.cloneColumns[index].sortMethod(a, b); | |
| 329 | + } else { | |
| 330 | + return type === 'asc' ? a[key] > b[key] : a[key] < b[key]; | |
| 331 | + } | |
| 332 | + }); | |
| 333 | + return data; | |
| 334 | + }, | |
| 324 | 335 | handleSort (index, type) { |
| 325 | 336 | this.cloneColumns.forEach((col) => col._sortType = 'normal'); |
| 326 | 337 | |
| 327 | 338 | const key = this.cloneColumns[index].key; |
| 328 | 339 | if (this.cloneColumns[index].sortable !== 'custom') { // custom is for remote sort |
| 329 | - if (type === 'asc') { | |
| 330 | - this.rebuildData.sort((a, b) => { | |
| 331 | - if (this.cloneColumns[index].sortMethod) { | |
| 332 | - return this.cloneColumns[index].sortMethod(a, b); | |
| 333 | - } else { | |
| 334 | - return a[key] > b[key]; | |
| 335 | - } | |
| 336 | - }); | |
| 337 | - } else if (type === 'desc') { | |
| 338 | - this.rebuildData.sort((a, b) => { | |
| 339 | - if (this.cloneColumns[index].sortMethod) { | |
| 340 | - return this.cloneColumns[index].sortMethod(a, b); | |
| 341 | - } else { | |
| 342 | - return a[key] < b[key]; | |
| 343 | - } | |
| 344 | - }); | |
| 345 | - } else if (type === 'normal') { | |
| 340 | + if (type === 'normal') { | |
| 346 | 341 | this.rebuildData = this.makeData(); |
| 342 | + } else { | |
| 343 | + this.rebuildData = this.sortData(this.rebuildData, type, index); | |
| 347 | 344 | } |
| 348 | 345 | } |
| 349 | - | |
| 350 | 346 | this.cloneColumns[index]._sortType = type; |
| 351 | 347 | |
| 352 | 348 | this.$emit('on-sort-change', { |
| 353 | 349 | column: JSON.parse(JSON.stringify(this.columns[this.cloneColumns[index]._index])), |
| 354 | 350 | key: key, |
| 355 | 351 | order: type |
| 356 | - }) | |
| 352 | + }); | |
| 357 | 353 | }, |
| 358 | 354 | handleFilterHide (index) { // clear checked that not filter now |
| 359 | 355 | if (!this.cloneColumns[index]._isFiltered) this.cloneColumns[index]._filterChecked = []; |
| ... | ... | @@ -378,7 +374,7 @@ |
| 378 | 374 | }, |
| 379 | 375 | handleFilter (index) { |
| 380 | 376 | const column = this.cloneColumns[index]; |
| 381 | - let filterData = this.makeData(); | |
| 377 | + let filterData = this.makeDataWithSort(); | |
| 382 | 378 | |
| 383 | 379 | // filter others first, after filter this column |
| 384 | 380 | filterData = this.filterOtherData(filterData, index); |
| ... | ... | @@ -396,7 +392,7 @@ |
| 396 | 392 | this.cloneColumns[index]._filterVisible = false; |
| 397 | 393 | this.cloneColumns[index]._filterChecked = []; |
| 398 | 394 | |
| 399 | - let filterData = this.makeData(); | |
| 395 | + let filterData = this.makeDataWithSort(); | |
| 400 | 396 | filterData = this.filterOtherData(filterData, index); |
| 401 | 397 | this.rebuildData = filterData; |
| 402 | 398 | }, |
| ... | ... | @@ -405,6 +401,20 @@ |
| 405 | 401 | data.forEach((row, index) => row._index = index); |
| 406 | 402 | return data; |
| 407 | 403 | }, |
| 404 | + makeDataWithSort () { | |
| 405 | + let data = this.makeData(); | |
| 406 | + let sortType = 'normal'; | |
| 407 | + let sortIndex = -1; | |
| 408 | + for (let i = 0; i < this.cloneColumns.length; i++) { | |
| 409 | + if (this.cloneColumns[i]._sortType !== 'normal') { | |
| 410 | + sortType = this.cloneColumns[i]._sortType; | |
| 411 | + sortIndex = i; | |
| 412 | + break; | |
| 413 | + } | |
| 414 | + } | |
| 415 | + if (sortType !== 'normal') data = this.sortData(data, sortType, sortIndex); | |
| 416 | + return data; | |
| 417 | + }, | |
| 408 | 418 | makeObjData () { |
| 409 | 419 | let data = {}; |
| 410 | 420 | this.data.forEach((row, index) => { | ... | ... |
test/routers/table.vue
| ... | ... | @@ -99,7 +99,7 @@ |
| 99 | 99 | key: 'age', |
| 100 | 100 | align: 'right', |
| 101 | 101 | // fixed: 'left', |
| 102 | - sortable: 'custom', | |
| 102 | + sortable: true, | |
| 103 | 103 | width: 100, |
| 104 | 104 | filters: [ |
| 105 | 105 | { |
| ... | ... | @@ -235,7 +235,7 @@ |
| 235 | 235 | // }); |
| 236 | 236 | // this.data.splice(0, 1) |
| 237 | 237 | // this.columns.splice(2,1) |
| 238 | - }, 2000); | |
| 238 | + }, 3000); | |
| 239 | 239 | } |
| 240 | 240 | } |
| 241 | 241 | </script> |
| 242 | 242 | \ No newline at end of file | ... | ... |