Commit ba8e03c69958d527519fd2eba4641a5d799ecde8

Authored by 梁灏
1 parent 9f723b02

update Select check style

examples/routers/table.vue
1 1 <template>
2   - <Table border :columns="columns6" :data="data5"></Table>
  2 + <div>
  3 + <Table :columns="columns8" :data="data7" size="small" ref="table"></Table>
  4 + <br>
  5 + <Button type="primary" size="large" @click="exportData(1)"><Icon type="ios-download-outline"></Icon> Export source data</Button>
  6 + <Button type="primary" size="large" @click="exportData(2)"><Icon type="ios-download-outline"></Icon> Export sorting and filtered data</Button>
  7 + <Button type="primary" size="large" @click="exportData(3)"><Icon type="ios-download-outline"></Icon> Export custom data</Button>
  8 + </div>
3 9 </template>
4 10 <script>
5 11 export default {
6 12 data () {
7 13 return {
8   - columns6: [
  14 + columns8: [
9 15 {
10   - title: 'Date',
11   - key: 'date'
  16 + "title": "Name",
  17 + "key": "name",
  18 + "fixed": "left",
  19 + "width": 200
12 20 },
13 21 {
14   - title: 'Name',
15   - key: 'name'
16   - },
17   - {
18   - title: '年龄',
19   - key: 'age',
  22 + "title": "Show",
  23 + "key": "show",
  24 + "width": 150,
  25 + "sortable": true,
20 26 filters: [
21 27 {
22   - label: 'Greater than 25',
  28 + label: 'Greater than 4000',
23 29 value: 1
24 30 },
25 31 {
26   - label: 'Less than 25',
  32 + label: 'Less than 4000',
27 33 value: 2
28 34 }
29 35 ],
30 36 filterMultiple: false,
31 37 filterMethod (value, row) {
32 38 if (value === 1) {
33   - return row.age > 25;
  39 + return row.show > 4000;
34 40 } else if (value === 2) {
35   - return row.age < 25;
  41 + return row.show < 4000;
36 42 }
37 43 }
38 44 },
39 45 {
40   - title: '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   - }
  46 + "title": "Weak",
  47 + "key": "weak",
  48 + "width": 150,
  49 + "sortable": true
  50 + },
  51 + {
  52 + "title": "Signin",
  53 + "key": "signin",
  54 + "width": 150,
  55 + "sortable": true
  56 + },
  57 + {
  58 + "title": "Click",
  59 + "key": "click",
  60 + "width": 150,
  61 + "sortable": true
  62 + },
  63 + {
  64 + "title": "Active",
  65 + "key": "active",
  66 + "width": 150,
  67 + "sortable": true
  68 + },
  69 + {
  70 + "title": "7, retained",
  71 + "key": "day7",
  72 + "width": 150,
  73 + "sortable": true
  74 + },
  75 + {
  76 + "title": "30, retained",
  77 + "key": "day30",
  78 + "width": 150,
  79 + "sortable": true
  80 + },
  81 + {
  82 + "title": "The next day left",
  83 + "key": "tomorrow",
  84 + "width": 150,
  85 + "sortable": true
  86 + },
  87 + {
  88 + "title": "Day Active",
  89 + "key": "day",
  90 + "width": 150,
  91 + "sortable": true
  92 + },
  93 + {
  94 + "title": "Week Active",
  95 + "key": "week",
  96 + "width": 150,
  97 + "sortable": true
  98 + },
  99 + {
  100 + "title": "Month Active",
  101 + "key": "month",
  102 + "width": 150,
  103 + "sortable": true
59 104 }
60 105 ],
61   - data5: [
  106 + data7: [
  107 + {
  108 + "name": "Name1",
  109 + "fav": 0,
  110 + "show": 7302,
  111 + "weak": 5627,
  112 + "signin": 1563,
  113 + "click": 4254,
  114 + "active": 1438,
  115 + "day7": 274,
  116 + "day30": 285,
  117 + "tomorrow": 1727,
  118 + "day": 558,
  119 + "week": 4440,
  120 + "month": 5610
  121 + },
  122 + {
  123 + "name": "Name2",
  124 + "fav": 0,
  125 + "show": 4720,
  126 + "weak": 4086,
  127 + "signin": 3792,
  128 + "click": 8690,
  129 + "active": 8470,
  130 + "day7": 8172,
  131 + "day30": 5197,
  132 + "tomorrow": 1684,
  133 + "day": 2593,
  134 + "week": 2507,
  135 + "month": 1537
  136 + },
  137 + {
  138 + "name": "Name3",
  139 + "fav": 0,
  140 + "show": 7181,
  141 + "weak": 8007,
  142 + "signin": 8477,
  143 + "click": 1879,
  144 + "active": 16,
  145 + "day7": 2249,
  146 + "day30": 3450,
  147 + "tomorrow": 377,
  148 + "day": 1561,
  149 + "week": 3219,
  150 + "month": 1588
  151 + },
62 152 {
63   - name: 'John Brown',
64   - age: 18,
65   - address: 'New York No. 1 Lake Park',
66   - date: '2016-10-03'
  153 + "name": "Name4",
  154 + "fav": 0,
  155 + "show": 9911,
  156 + "weak": 8976,
  157 + "signin": 8807,
  158 + "click": 8050,
  159 + "active": 7668,
  160 + "day7": 1547,
  161 + "day30": 2357,
  162 + "tomorrow": 7278,
  163 + "day": 5309,
  164 + "week": 1655,
  165 + "month": 9043
67 166 },
68 167 {
69   - name: 'Jim Green',
70   - age: 24,
71   - address: 'London No. 1 Lake Park',
72   - date: '2016-10-01'
  168 + "name": "Name5",
  169 + "fav": 0,
  170 + "show": 934,
  171 + "weak": 1394,
  172 + "signin": 6463,
  173 + "click": 5278,
  174 + "active": 9256,
  175 + "day7": 209,
  176 + "day30": 3563,
  177 + "tomorrow": 8285,
  178 + "day": 1230,
  179 + "week": 4840,
  180 + "month": 9908
73 181 },
74 182 {
75   - name: 'Joe Black',
76   - age: 30,
77   - address: 'Sydney No. 1 Lake Park',
78   - date: '2016-10-02'
  183 + "name": "Name6",
  184 + "fav": 0,
  185 + "show": 6856,
  186 + "weak": 1608,
  187 + "signin": 457,
  188 + "click": 4949,
  189 + "active": 2909,
  190 + "day7": 4525,
  191 + "day30": 6171,
  192 + "tomorrow": 1920,
  193 + "day": 1966,
  194 + "week": 904,
  195 + "month": 6851
79 196 },
80 197 {
81   - name: 'Jon Snow',
82   - age: 26,
83   - address: 'Ottawa No. 2 Lake Park',
84   - date: '2016-10-04'
  198 + "name": "Name7",
  199 + "fav": 0,
  200 + "show": 5107,
  201 + "weak": 6407,
  202 + "signin": 4166,
  203 + "click": 7970,
  204 + "active": 1002,
  205 + "day7": 8701,
  206 + "day30": 9040,
  207 + "tomorrow": 7632,
  208 + "day": 4061,
  209 + "week": 4359,
  210 + "month": 3676
  211 + },
  212 + {
  213 + "name": "Name8",
  214 + "fav": 0,
  215 + "show": 862,
  216 + "weak": 6520,
  217 + "signin": 6696,
  218 + "click": 3209,
  219 + "active": 6801,
  220 + "day7": 6364,
  221 + "day30": 6850,
  222 + "tomorrow": 9408,
  223 + "day": 2481,
  224 + "week": 1479,
  225 + "month": 2346
  226 + },
  227 + {
  228 + "name": "Name9",
  229 + "fav": 0,
  230 + "show": 567,
  231 + "weak": 5859,
  232 + "signin": 128,
  233 + "click": 6593,
  234 + "active": 1971,
  235 + "day7": 7596,
  236 + "day30": 3546,
  237 + "tomorrow": 6641,
  238 + "day": 1611,
  239 + "week": 5534,
  240 + "month": 3190
  241 + },
  242 + {
  243 + "name": "Name10",
  244 + "fav": 0,
  245 + "show": 3651,
  246 + "weak": 1819,
  247 + "signin": 4595,
  248 + "click": 7499,
  249 + "active": 7405,
  250 + "day7": 8710,
  251 + "day30": 5518,
  252 + "tomorrow": 428,
  253 + "day": 9768,
  254 + "week": 2864,
  255 + "month": 5811
85 256 }
86   - ],
  257 + ]
  258 + }
  259 + },
  260 + methods: {
  261 + exportData (type) {
  262 + if (type === 1) {
  263 + this.$refs.table.exportCsv({
  264 + filename: 'The original data'
  265 + });
  266 + } else if (type === 2) {
  267 + this.$refs.table.exportCsv({
  268 + filename: 'Sorting and filtering data',
  269 + original: false
  270 + });
  271 + } else if (type === 3) {
  272 + this.$refs.table.exportCsv({
  273 + filename: 'Custom data',
  274 + columns: this.columns8.filter((col, index) => index < 4),
  275 + data: this.data7.filter((data, index) => index < 4)
  276 + });
  277 + }
87 278 }
88 279 }
89 280 }
... ...
src/styles/components/select.less
... ... @@ -253,7 +253,7 @@
253 253 color: @selected-color;
254 254 position: absolute;
255 255 top: 2px;
256   - right: 16px;
  256 + right: 8px;
257 257 }
258 258 }
259 259  
... ...