Commit cb31ede0398f8e6f746c015b5a8db00b0179beee
1 parent
45e7ed7e
update Table
update Table
Showing
2 changed files
with
41 additions
and
16 deletions
Show diff stats
src/components/table/table.vue
| @@ -358,18 +358,32 @@ | @@ -358,18 +358,32 @@ | ||
| 358 | handleFilterHide (index) { // clear checked that not filter now | 358 | handleFilterHide (index) { // clear checked that not filter now |
| 359 | if (!this.cloneColumns[index]._isFiltered) this.cloneColumns[index]._filterChecked = []; | 359 | if (!this.cloneColumns[index]._isFiltered) this.cloneColumns[index]._filterChecked = []; |
| 360 | }, | 360 | }, |
| 361 | - handleFilter (index) { | ||
| 362 | - const column = this.cloneColumns[index]; | ||
| 363 | - const filterData = this.makeData(); | ||
| 364 | - | ||
| 365 | - this.rebuildData = filterData.filter((row) => { | ||
| 366 | - let status = false; | 361 | + filterData (data, column) { |
| 362 | + return data.filter((row) => { | ||
| 363 | + let status = !column._filterChecked.length; | ||
| 367 | for (let i = 0; i < column._filterChecked.length; i++) { | 364 | for (let i = 0; i < column._filterChecked.length; i++) { |
| 368 | status = column.filterMethod(column._filterChecked[i], row); | 365 | status = column.filterMethod(column._filterChecked[i], row); |
| 369 | if (status) break; | 366 | if (status) break; |
| 370 | } | 367 | } |
| 371 | return status; | 368 | return status; |
| 372 | }); | 369 | }); |
| 370 | + }, | ||
| 371 | + filterOtherData (data, index) { | ||
| 372 | + this.cloneColumns.forEach((col, colIndex) => { | ||
| 373 | + if (colIndex !== index) { | ||
| 374 | + data = this.filterData(data, col); | ||
| 375 | + } | ||
| 376 | + }); | ||
| 377 | + return data; | ||
| 378 | + }, | ||
| 379 | + handleFilter (index) { | ||
| 380 | + const column = this.cloneColumns[index]; | ||
| 381 | + let filterData = this.makeData(); | ||
| 382 | + | ||
| 383 | + // filter others first, after filter this column | ||
| 384 | + filterData = this.filterOtherData(filterData, index); | ||
| 385 | + this.rebuildData = this.filterData(filterData, column); | ||
| 386 | + | ||
| 373 | this.cloneColumns[index]._isFiltered = true; | 387 | this.cloneColumns[index]._isFiltered = true; |
| 374 | this.cloneColumns[index]._filterVisible = false; | 388 | this.cloneColumns[index]._filterVisible = false; |
| 375 | }, | 389 | }, |
| @@ -381,7 +395,10 @@ | @@ -381,7 +395,10 @@ | ||
| 381 | this.cloneColumns[index]._isFiltered = false; | 395 | this.cloneColumns[index]._isFiltered = false; |
| 382 | this.cloneColumns[index]._filterVisible = false; | 396 | this.cloneColumns[index]._filterVisible = false; |
| 383 | this.cloneColumns[index]._filterChecked = []; | 397 | this.cloneColumns[index]._filterChecked = []; |
| 384 | - this.rebuildData = this.makeData(); | 398 | + |
| 399 | + let filterData = this.makeData(); | ||
| 400 | + filterData = this.filterOtherData(filterData, index); | ||
| 401 | + this.rebuildData = filterData; | ||
| 385 | }, | 402 | }, |
| 386 | makeData () { | 403 | makeData () { |
| 387 | let data = deepCopy(this.data); | 404 | let data = deepCopy(this.data); |
test/routers/table.vue
| @@ -8,7 +8,7 @@ | @@ -8,7 +8,7 @@ | ||
| 8 | <!--<i-table size="large" border stripe :columns="columns" :data="data"></i-table>--> | 8 | <!--<i-table size="large" border stripe :columns="columns" :data="data"></i-table>--> |
| 9 | <br> | 9 | <br> |
| 10 | <i-table | 10 | <i-table |
| 11 | - width="450" | 11 | + width="850" |
| 12 | stripe | 12 | stripe |
| 13 | border | 13 | border |
| 14 | highlight-row | 14 | highlight-row |
| @@ -55,20 +55,20 @@ | @@ -55,20 +55,20 @@ | ||
| 55 | width: 100, | 55 | width: 100, |
| 56 | filters: [ | 56 | filters: [ |
| 57 | { | 57 | { |
| 58 | - label: '大于25岁', | 58 | + label: '两个字', |
| 59 | value: 1 | 59 | value: 1 |
| 60 | }, | 60 | }, |
| 61 | { | 61 | { |
| 62 | - label: '小于25岁', | 62 | + label: '三个字', |
| 63 | value: 2 | 63 | value: 2 |
| 64 | } | 64 | } |
| 65 | ], | 65 | ], |
| 66 | filterMultiple: false, | 66 | filterMultiple: false, |
| 67 | filterMethod (value, row) { | 67 | filterMethod (value, row) { |
| 68 | if (value === 1) { | 68 | if (value === 1) { |
| 69 | - return row.age >= 25; | 69 | + return row.name.length == 2; |
| 70 | } else if (value === 2) { | 70 | } else if (value === 2) { |
| 71 | - return row.age < 25; | 71 | + return row.name.length == 3; |
| 72 | } | 72 | } |
| 73 | } | 73 | } |
| 74 | }, | 74 | }, |
| @@ -103,14 +103,22 @@ | @@ -103,14 +103,22 @@ | ||
| 103 | width: 100, | 103 | width: 100, |
| 104 | filters: [ | 104 | filters: [ |
| 105 | { | 105 | { |
| 106 | - label: '家', | ||
| 107 | - value: 'home' | 106 | + label: '大于25岁', |
| 107 | + value: 1 | ||
| 108 | }, | 108 | }, |
| 109 | { | 109 | { |
| 110 | - label: '公司', | ||
| 111 | - value: 'company' | 110 | + label: '小于25岁', |
| 111 | + value: 2 | ||
| 112 | } | 112 | } |
| 113 | ], | 113 | ], |
| 114 | + filterMultiple: false, | ||
| 115 | + filterMethod (value, row) { | ||
| 116 | + if (value === 1) { | ||
| 117 | + return row.age >= 25; | ||
| 118 | + } else if (value === 2) { | ||
| 119 | + return row.age < 25; | ||
| 120 | + } | ||
| 121 | + } | ||
| 114 | // render (row) { | 122 | // render (row) { |
| 115 | // return `<i-button>${row.age}</i-button>` | 123 | // return `<i-button>${row.age}</i-button>` |
| 116 | // } | 124 | // } |