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 | 358 | handleFilterHide (index) { // clear checked that not filter now |
| 359 | 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 | 364 | for (let i = 0; i < column._filterChecked.length; i++) { |
| 368 | 365 | status = column.filterMethod(column._filterChecked[i], row); |
| 369 | 366 | if (status) break; |
| 370 | 367 | } |
| 371 | 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 | 387 | this.cloneColumns[index]._isFiltered = true; |
| 374 | 388 | this.cloneColumns[index]._filterVisible = false; |
| 375 | 389 | }, |
| ... | ... | @@ -381,7 +395,10 @@ |
| 381 | 395 | this.cloneColumns[index]._isFiltered = false; |
| 382 | 396 | this.cloneColumns[index]._filterVisible = false; |
| 383 | 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 | 403 | makeData () { |
| 387 | 404 | let data = deepCopy(this.data); | ... | ... |
test/routers/table.vue
| ... | ... | @@ -8,7 +8,7 @@ |
| 8 | 8 | <!--<i-table size="large" border stripe :columns="columns" :data="data"></i-table>--> |
| 9 | 9 | <br> |
| 10 | 10 | <i-table |
| 11 | - width="450" | |
| 11 | + width="850" | |
| 12 | 12 | stripe |
| 13 | 13 | border |
| 14 | 14 | highlight-row |
| ... | ... | @@ -55,20 +55,20 @@ |
| 55 | 55 | width: 100, |
| 56 | 56 | filters: [ |
| 57 | 57 | { |
| 58 | - label: '大于25岁', | |
| 58 | + label: '两个字', | |
| 59 | 59 | value: 1 |
| 60 | 60 | }, |
| 61 | 61 | { |
| 62 | - label: '小于25岁', | |
| 62 | + label: '三个字', | |
| 63 | 63 | value: 2 |
| 64 | 64 | } |
| 65 | 65 | ], |
| 66 | 66 | filterMultiple: false, |
| 67 | 67 | filterMethod (value, row) { |
| 68 | 68 | if (value === 1) { |
| 69 | - return row.age >= 25; | |
| 69 | + return row.name.length == 2; | |
| 70 | 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 | 103 | width: 100, |
| 104 | 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 | 122 | // render (row) { |
| 115 | 123 | // return `<i-button>${row.age}</i-button>` |
| 116 | 124 | // } | ... | ... |