Commit 9f853e3ec898d605f2c16d3e456eaf41509cdee3

Authored by 梁灏
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