Commit 9f723b0257cba05a596038f8ae6e21ee0709c2de

Authored by 梁灏
1 parent a000231e

update Table filter style

examples/routers/table.vue
1 <template> 1 <template>
2 - <Table border :columns="columns5" :data="data5"></Table> 2 + <Table border :columns="columns6" :data="data5"></Table>
3 </template> 3 </template>
4 <script> 4 <script>
5 export default { 5 export default {
6 data () { 6 data () {
7 return { 7 return {
8 - columns5: [ 8 + columns6: [
9 { 9 {
10 title: 'Date', 10 title: 'Date',
11 - key: 'date',  
12 - sortable: true 11 + key: 'date'
13 }, 12 },
14 { 13 {
15 title: 'Name', 14 title: 'Name',
16 key: 'name' 15 key: 'name'
17 }, 16 },
18 { 17 {
19 - title: 'Age', 18 + title: '年龄',
20 key: 'age', 19 key: 'age',
21 - sortable: true 20 + filters: [
  21 + {
  22 + label: 'Greater than 25',
  23 + value: 1
  24 + },
  25 + {
  26 + label: 'Less than 25',
  27 + value: 2
  28 + }
  29 + ],
  30 + filterMultiple: false,
  31 + filterMethod (value, row) {
  32 + if (value === 1) {
  33 + return row.age > 25;
  34 + } else if (value === 2) {
  35 + return row.age < 25;
  36 + }
  37 + }
22 }, 38 },
23 { 39 {
24 title: 'Address', 40 title: 'Address',
25 - key: 'address' 41 + key: 'address',
  42 + filters: [
  43 + {
  44 + label: 'New York',
  45 + value: 'New York'
  46 + },
  47 + {
  48 + label: 'London',
  49 + value: 'London'
  50 + },
  51 + {
  52 + label: 'Sydney',
  53 + value: 'Sydney'
  54 + }
  55 + ],
  56 + filterMethod (value, row) {
  57 + return row.address.indexOf(value) > -1;
  58 + }
26 } 59 }
27 ], 60 ],
28 data5: [ 61 data5: [
@@ -50,7 +83,7 @@ @@ -50,7 +83,7 @@
50 address: 'Ottawa No. 2 Lake Park', 83 address: 'Ottawa No. 2 Lake Park',
51 date: '2016-10-04' 84 date: '2016-10-04'
52 } 85 }
53 - ] 86 + ],
54 } 87 }
55 } 88 }
56 } 89 }
src/styles/components/table.less
@@ -333,6 +333,8 @@ @@ -333,6 +333,8 @@
333 display: inline-block; 333 display: inline-block;
334 cursor: pointer; 334 cursor: pointer;
335 position: relative; 335 position: relative;
  336 + position: relative;
  337 + top: 1px;
336 338
337 i{ 339 i{
338 color: @btn-disable-color; 340 color: @btn-disable-color;