Commit ba8e03c69958d527519fd2eba4641a5d799ecde8
1 parent
9f723b02
update Select check style
Showing
2 changed files
with
243 additions
and
52 deletions
Show diff stats
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 | } | ... | ... |