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 | // } | ... | ... |