Commit 91bda66d87c5d66baf263f621e66e86ae14aee90
Committed by
GitHub

Merge pull request #605 from hezhiying/table-filters
添加filterRemote方法,支持用户远程筛选数据
Showing
2 changed files
with
47 additions
and
1 deletions
Show diff stats
examples/routers/table.vue
@@ -16,7 +16,28 @@ | @@ -16,7 +16,28 @@ | ||
16 | }, | 16 | }, |
17 | { | 17 | { |
18 | title: '年龄', | 18 | title: '年龄', |
19 | - key: 'age' | 19 | + key: 'age', |
20 | + filters:[ | ||
21 | + { | ||
22 | + label: '小学', | ||
23 | + value: '小学' | ||
24 | + }, | ||
25 | + { | ||
26 | + label: '中学', | ||
27 | + value: '大学' | ||
28 | + }, | ||
29 | + { | ||
30 | + label: '中学', | ||
31 | + value: '中学' | ||
32 | + } | ||
33 | + ], | ||
34 | + filterRemote:function(value,key,column){ | ||
35 | + var that = this; | ||
36 | + this.$Notice.open({title:`正在远程过滤${key}`,desc:value,duration:3,onClose:function(){ | ||
37 | + that.remoteFilter(value,key,column) | ||
38 | + }}) | ||
39 | + | ||
40 | + } | ||
20 | }, | 41 | }, |
21 | { | 42 | { |
22 | title: '地址', | 43 | title: '地址', |
@@ -66,6 +87,23 @@ | @@ -66,6 +87,23 @@ | ||
66 | } | 87 | } |
67 | ] | 88 | ] |
68 | } | 89 | } |
90 | + | ||
91 | + }, | ||
92 | + methods:{ | ||
93 | + remoteFilter:function(val,age,column){ | ||
94 | + this.data1 = [ | ||
95 | + { | ||
96 | + name: '模拟1', | ||
97 | + age: 18, | ||
98 | + address: '北京市朝阳区芍药居' | ||
99 | + }, | ||
100 | + { | ||
101 | + name: '模拟2', | ||
102 | + age: 25, | ||
103 | + address: '北京市海淀区西二旗' | ||
104 | + }, | ||
105 | + ] | ||
106 | + } | ||
69 | } | 107 | } |
70 | } | 108 | } |
71 | </script> | 109 | </script> |
src/components/table/table.vue
@@ -496,6 +496,9 @@ | @@ -496,6 +496,9 @@ | ||
496 | }, | 496 | }, |
497 | filterData (data, column) { | 497 | filterData (data, column) { |
498 | return data.filter((row) => { | 498 | return data.filter((row) => { |
499 | + if(typeof column.filterRemote == 'function'){ //如果定义了远程过滤方法则忽略此方法 | ||
500 | + return true; | ||
501 | + } | ||
499 | let status = !column._filterChecked.length; | 502 | let status = !column._filterChecked.length; |
500 | for (let i = 0; i < column._filterChecked.length; i++) { | 503 | for (let i = 0; i < column._filterChecked.length; i++) { |
501 | status = column.filterMethod(column._filterChecked[i], row); | 504 | status = column.filterMethod(column._filterChecked[i], row); |
@@ -505,6 +508,11 @@ | @@ -505,6 +508,11 @@ | ||
505 | }); | 508 | }); |
506 | }, | 509 | }, |
507 | filterOtherData (data, index) { | 510 | filterOtherData (data, index) { |
511 | + let column = this.cloneColumns[index]; | ||
512 | + if(typeof column.filterRemote == 'function'){ | ||
513 | + column.filterRemote.call(this.$parent,column._filterChecked,column.key,column); | ||
514 | + } | ||
515 | + | ||
508 | this.cloneColumns.forEach((col, colIndex) => { | 516 | this.cloneColumns.forEach((col, colIndex) => { |
509 | if (colIndex !== index) { | 517 | if (colIndex !== index) { |
510 | data = this.filterData(data, col); | 518 | data = this.filterData(data, col); |