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,39 +321,35 @@ | ||
321 | $body.scrollLeft = $body.scrollLeft - 10; | 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 | handleSort (index, type) { | 335 | handleSort (index, type) { |
325 | this.cloneColumns.forEach((col) => col._sortType = 'normal'); | 336 | this.cloneColumns.forEach((col) => col._sortType = 'normal'); |
326 | 337 | ||
327 | const key = this.cloneColumns[index].key; | 338 | const key = this.cloneColumns[index].key; |
328 | if (this.cloneColumns[index].sortable !== 'custom') { // custom is for remote sort | 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 | this.rebuildData = this.makeData(); | 341 | this.rebuildData = this.makeData(); |
342 | + } else { | ||
343 | + this.rebuildData = this.sortData(this.rebuildData, type, index); | ||
347 | } | 344 | } |
348 | } | 345 | } |
349 | - | ||
350 | this.cloneColumns[index]._sortType = type; | 346 | this.cloneColumns[index]._sortType = type; |
351 | 347 | ||
352 | this.$emit('on-sort-change', { | 348 | this.$emit('on-sort-change', { |
353 | column: JSON.parse(JSON.stringify(this.columns[this.cloneColumns[index]._index])), | 349 | column: JSON.parse(JSON.stringify(this.columns[this.cloneColumns[index]._index])), |
354 | key: key, | 350 | key: key, |
355 | order: type | 351 | order: type |
356 | - }) | 352 | + }); |
357 | }, | 353 | }, |
358 | handleFilterHide (index) { // clear checked that not filter now | 354 | handleFilterHide (index) { // clear checked that not filter now |
359 | if (!this.cloneColumns[index]._isFiltered) this.cloneColumns[index]._filterChecked = []; | 355 | if (!this.cloneColumns[index]._isFiltered) this.cloneColumns[index]._filterChecked = []; |
@@ -378,7 +374,7 @@ | @@ -378,7 +374,7 @@ | ||
378 | }, | 374 | }, |
379 | handleFilter (index) { | 375 | handleFilter (index) { |
380 | const column = this.cloneColumns[index]; | 376 | const column = this.cloneColumns[index]; |
381 | - let filterData = this.makeData(); | 377 | + let filterData = this.makeDataWithSort(); |
382 | 378 | ||
383 | // filter others first, after filter this column | 379 | // filter others first, after filter this column |
384 | filterData = this.filterOtherData(filterData, index); | 380 | filterData = this.filterOtherData(filterData, index); |
@@ -396,7 +392,7 @@ | @@ -396,7 +392,7 @@ | ||
396 | this.cloneColumns[index]._filterVisible = false; | 392 | this.cloneColumns[index]._filterVisible = false; |
397 | this.cloneColumns[index]._filterChecked = []; | 393 | this.cloneColumns[index]._filterChecked = []; |
398 | 394 | ||
399 | - let filterData = this.makeData(); | 395 | + let filterData = this.makeDataWithSort(); |
400 | filterData = this.filterOtherData(filterData, index); | 396 | filterData = this.filterOtherData(filterData, index); |
401 | this.rebuildData = filterData; | 397 | this.rebuildData = filterData; |
402 | }, | 398 | }, |
@@ -405,6 +401,20 @@ | @@ -405,6 +401,20 @@ | ||
405 | data.forEach((row, index) => row._index = index); | 401 | data.forEach((row, index) => row._index = index); |
406 | return data; | 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 | makeObjData () { | 418 | makeObjData () { |
409 | let data = {}; | 419 | let data = {}; |
410 | this.data.forEach((row, index) => { | 420 | this.data.forEach((row, index) => { |
test/routers/table.vue
@@ -99,7 +99,7 @@ | @@ -99,7 +99,7 @@ | ||
99 | key: 'age', | 99 | key: 'age', |
100 | align: 'right', | 100 | align: 'right', |
101 | // fixed: 'left', | 101 | // fixed: 'left', |
102 | - sortable: 'custom', | 102 | + sortable: true, |
103 | width: 100, | 103 | width: 100, |
104 | filters: [ | 104 | filters: [ |
105 | { | 105 | { |
@@ -235,7 +235,7 @@ | @@ -235,7 +235,7 @@ | ||
235 | // }); | 235 | // }); |
236 | // this.data.splice(0, 1) | 236 | // this.data.splice(0, 1) |
237 | // this.columns.splice(2,1) | 237 | // this.columns.splice(2,1) |
238 | - }, 2000); | 238 | + }, 3000); |
239 | } | 239 | } |
240 | } | 240 | } |
241 | </script> | 241 | </script> |
242 | \ No newline at end of file | 242 | \ No newline at end of file |