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