Commit db8d1f7de7299466860e6b4585910efe5632db2b
1 parent
0f677893
fixed #121
fixed #121
Showing
2 changed files
with
61 additions
and
253 deletions
Show diff stats
src/styles/components/table.less
test/routers/table.vue
| 1 | <template> | 1 | <template> |
| 2 | - <i-table :columns="columns8" :data="data7" size="small" v-ref:table></i-table> | ||
| 3 | - <br> | ||
| 4 | - <i-button type="primary" size="large" @click="exportData(1)"><Icon type="ios-download-outline"></Icon> 导出原始数据</i-button> | ||
| 5 | - <i-button type="primary" size="large" @click="exportData(2)"><Icon type="ios-download-outline"></Icon> 导出排序和过滤后的数据</i-button> | ||
| 6 | - <i-button type="primary" size="large" @click="exportData(3)"><Icon type="ios-download-outline"></Icon> 导出自定义数据</i-button> | 2 | + <i-table width="550" border :columns="columns2" :data="data3"></i-table> |
| 7 | </template> | 3 | </template> |
| 8 | <script> | 4 | <script> |
| 9 | export default { | 5 | export default { |
| 10 | data () { | 6 | data () { |
| 11 | return { | 7 | return { |
| 12 | - columns8: [ | 8 | + columns2: [ |
| 13 | { | 9 | { |
| 14 | - "title": "名称", | ||
| 15 | - "key": "name", | ||
| 16 | - "fixed": "left", | ||
| 17 | - "width": 200 | 10 | + title: '姓名', |
| 11 | + key: 'name', | ||
| 12 | + width: 100, | ||
| 13 | + fixed: 'left' | ||
| 18 | }, | 14 | }, |
| 19 | { | 15 | { |
| 20 | - "title": "展示", | ||
| 21 | - "key": "show", | ||
| 22 | - "width": 150, | ||
| 23 | - "sortable": true, | ||
| 24 | - filters: [ | ||
| 25 | - { | ||
| 26 | - label: '大于4000', | ||
| 27 | - value: 1 | ||
| 28 | - }, | ||
| 29 | - { | ||
| 30 | - label: '小于4000', | ||
| 31 | - value: 2 | ||
| 32 | - } | ||
| 33 | - ], | ||
| 34 | - filterMultiple: false, | ||
| 35 | - filterMethod (value, row) { | ||
| 36 | - if (value === 1) { | ||
| 37 | - return row.show > 4000; | ||
| 38 | - } else if (value === 2) { | ||
| 39 | - return row.show < 4000; | ||
| 40 | - } | ||
| 41 | - } | ||
| 42 | - }, | ||
| 43 | - { | ||
| 44 | - "title": "唤醒", | ||
| 45 | - "key": "weak", | ||
| 46 | - "width": 150, | ||
| 47 | - "sortable": true | ||
| 48 | - }, | ||
| 49 | - { | ||
| 50 | - "title": "登录", | ||
| 51 | - "key": "signin", | ||
| 52 | - "width": 150, | ||
| 53 | - "sortable": true | ||
| 54 | - }, | ||
| 55 | - { | ||
| 56 | - "title": "点击", | ||
| 57 | - "key": "click", | ||
| 58 | - "width": 150, | ||
| 59 | - "sortable": true | ||
| 60 | - }, | ||
| 61 | - { | ||
| 62 | - "title": "激活", | ||
| 63 | - "key": "active", | ||
| 64 | - "width": 150, | ||
| 65 | - "sortable": true | ||
| 66 | - }, | ||
| 67 | - { | ||
| 68 | - "title": "7日留存", | ||
| 69 | - "key": "day7", | ||
| 70 | - "width": 150, | ||
| 71 | - "sortable": true | 16 | + title: '年龄', |
| 17 | + key: 'age', | ||
| 18 | + width: 100 | ||
| 72 | }, | 19 | }, |
| 73 | { | 20 | { |
| 74 | - "title": "30日留存", | ||
| 75 | - "key": "day30", | ||
| 76 | - "width": 150, | ||
| 77 | - "sortable": true | 21 | + title: '省份', |
| 22 | + key: 'province', | ||
| 23 | + width: 100 | ||
| 78 | }, | 24 | }, |
| 79 | { | 25 | { |
| 80 | - "title": "次日留存", | ||
| 81 | - "key": "tomorrow", | ||
| 82 | - "width": 150, | ||
| 83 | - "sortable": true | 26 | + title: '市区', |
| 27 | + key: 'city', | ||
| 28 | + width: 100 | ||
| 84 | }, | 29 | }, |
| 85 | { | 30 | { |
| 86 | - "title": "日活跃", | ||
| 87 | - "key": "day", | ||
| 88 | - "width": 150, | ||
| 89 | - "sortable": true | 31 | + title: '地址', |
| 32 | + key: 'address', | ||
| 33 | + width: 200 | ||
| 90 | }, | 34 | }, |
| 91 | { | 35 | { |
| 92 | - "title": "周活跃", | ||
| 93 | - "key": "week", | ||
| 94 | - "width": 150, | ||
| 95 | - "sortable": true | 36 | + title: '邮编', |
| 37 | + key: 'zip', | ||
| 38 | + width: 100 | ||
| 96 | }, | 39 | }, |
| 97 | { | 40 | { |
| 98 | - "title": "月活跃", | ||
| 99 | - "key": "month", | ||
| 100 | - "width": 150, | ||
| 101 | - "sortable": true | 41 | + title: '操作', |
| 42 | + key: 'action', | ||
| 43 | + fixed: 'right', | ||
| 44 | + width: 120, | ||
| 45 | + render () { | ||
| 46 | + return `<i-button type="text" size="small">查看</i-button><i-button type="text" size="small">编辑</i-button>`; | ||
| 47 | + } | ||
| 102 | } | 48 | } |
| 103 | ], | 49 | ], |
| 104 | - data7: [ | ||
| 105 | - { | ||
| 106 | - "name": "推广名称1", | ||
| 107 | - "fav": 0, | ||
| 108 | - "show": 7302, | ||
| 109 | - "weak": 5627, | ||
| 110 | - "signin": 1563, | ||
| 111 | - "click": 4254, | ||
| 112 | - "active": 1438, | ||
| 113 | - "day7": 274, | ||
| 114 | - "day30": 285, | ||
| 115 | - "tomorrow": 1727, | ||
| 116 | - "day": 558, | ||
| 117 | - "week": 4440, | ||
| 118 | - "month": 5610 | ||
| 119 | - }, | ||
| 120 | - { | ||
| 121 | - "name": "推广名称2", | ||
| 122 | - "fav": 0, | ||
| 123 | - "show": 4720, | ||
| 124 | - "weak": 4086, | ||
| 125 | - "signin": 3792, | ||
| 126 | - "click": 8690, | ||
| 127 | - "active": 8470, | ||
| 128 | - "day7": 8172, | ||
| 129 | - "day30": 5197, | ||
| 130 | - "tomorrow": 1684, | ||
| 131 | - "day": 2593, | ||
| 132 | - "week": 2507, | ||
| 133 | - "month": 1537 | ||
| 134 | - }, | ||
| 135 | - { | ||
| 136 | - "name": "推广名称3", | ||
| 137 | - "fav": 0, | ||
| 138 | - "show": 7181, | ||
| 139 | - "weak": 8007, | ||
| 140 | - "signin": 8477, | ||
| 141 | - "click": 1879, | ||
| 142 | - "active": 16, | ||
| 143 | - "day7": 2249, | ||
| 144 | - "day30": 3450, | ||
| 145 | - "tomorrow": 377, | ||
| 146 | - "day": 1561, | ||
| 147 | - "week": 3219, | ||
| 148 | - "month": 1588 | ||
| 149 | - }, | ||
| 150 | - { | ||
| 151 | - "name": "推广名称4", | ||
| 152 | - "fav": 0, | ||
| 153 | - "show": 9911, | ||
| 154 | - "weak": 8976, | ||
| 155 | - "signin": 8807, | ||
| 156 | - "click": 8050, | ||
| 157 | - "active": 7668, | ||
| 158 | - "day7": 1547, | ||
| 159 | - "day30": 2357, | ||
| 160 | - "tomorrow": 7278, | ||
| 161 | - "day": 5309, | ||
| 162 | - "week": 1655, | ||
| 163 | - "month": 9043 | ||
| 164 | - }, | ||
| 165 | - { | ||
| 166 | - "name": "推广名称5", | ||
| 167 | - "fav": 0, | ||
| 168 | - "show": 934, | ||
| 169 | - "weak": 1394, | ||
| 170 | - "signin": 6463, | ||
| 171 | - "click": 5278, | ||
| 172 | - "active": 9256, | ||
| 173 | - "day7": 209, | ||
| 174 | - "day30": 3563, | ||
| 175 | - "tomorrow": 8285, | ||
| 176 | - "day": 1230, | ||
| 177 | - "week": 4840, | ||
| 178 | - "month": 9908 | ||
| 179 | - }, | ||
| 180 | - { | ||
| 181 | - "name": "推广名称6", | ||
| 182 | - "fav": 0, | ||
| 183 | - "show": 6856, | ||
| 184 | - "weak": 1608, | ||
| 185 | - "signin": 457, | ||
| 186 | - "click": 4949, | ||
| 187 | - "active": 2909, | ||
| 188 | - "day7": 4525, | ||
| 189 | - "day30": 6171, | ||
| 190 | - "tomorrow": 1920, | ||
| 191 | - "day": 1966, | ||
| 192 | - "week": 904, | ||
| 193 | - "month": 6851 | ||
| 194 | - }, | ||
| 195 | - { | ||
| 196 | - "name": "推广名称7", | ||
| 197 | - "fav": 0, | ||
| 198 | - "show": 5107, | ||
| 199 | - "weak": 6407, | ||
| 200 | - "signin": 4166, | ||
| 201 | - "click": 7970, | ||
| 202 | - "active": 1002, | ||
| 203 | - "day7": 8701, | ||
| 204 | - "day30": 9040, | ||
| 205 | - "tomorrow": 7632, | ||
| 206 | - "day": 4061, | ||
| 207 | - "week": 4359, | ||
| 208 | - "month": 3676 | ||
| 209 | - }, | ||
| 210 | - { | ||
| 211 | - "name": "推广名称8", | ||
| 212 | - "fav": 0, | ||
| 213 | - "show": 862, | ||
| 214 | - "weak": 6520, | ||
| 215 | - "signin": 6696, | ||
| 216 | - "click": 3209, | ||
| 217 | - "active": 6801, | ||
| 218 | - "day7": 6364, | ||
| 219 | - "day30": 6850, | ||
| 220 | - "tomorrow": 9408, | ||
| 221 | - "day": 2481, | ||
| 222 | - "week": 1479, | ||
| 223 | - "month": 2346 | ||
| 224 | - }, | ||
| 225 | - { | ||
| 226 | - "name": "推广名称9", | ||
| 227 | - "fav": 0, | ||
| 228 | - "show": 567, | ||
| 229 | - "weak": 5859, | ||
| 230 | - "signin": 128, | ||
| 231 | - "click": 6593, | ||
| 232 | - "active": 1971, | ||
| 233 | - "day7": 7596, | ||
| 234 | - "day30": 3546, | ||
| 235 | - "tomorrow": 6641, | ||
| 236 | - "day": 1611, | ||
| 237 | - "week": 5534, | ||
| 238 | - "month": 3190 | ||
| 239 | - }, | ||
| 240 | - { | ||
| 241 | - "name": "推广名称10", | ||
| 242 | - "fav": 0, | ||
| 243 | - "show": 3651, | ||
| 244 | - "weak": 1819, | ||
| 245 | - "signin": 4595, | ||
| 246 | - "click": 7499, | ||
| 247 | - "active": 7405, | ||
| 248 | - "day7": 8710, | ||
| 249 | - "day30": 5518, | ||
| 250 | - "tomorrow": 428, | ||
| 251 | - "day": 9768, | ||
| 252 | - "week": 2864, | ||
| 253 | - "month": 5811 | 50 | + data3: [ |
| 51 | + { | ||
| 52 | + name: '王小明', | ||
| 53 | + age: 18, | ||
| 54 | + address: '北京市朝阳区芍药居', | ||
| 55 | + province: '北京市', | ||
| 56 | + city: '朝阳区', | ||
| 57 | + zip: 100000 | ||
| 58 | + }, | ||
| 59 | + { | ||
| 60 | + name: '张小刚', | ||
| 61 | + age: 25, | ||
| 62 | + address: '北京市海淀区西二旗', | ||
| 63 | + province: '北京市', | ||
| 64 | + city: '海淀区', | ||
| 65 | + zip: 100000 | ||
| 66 | + }, | ||
| 67 | + { | ||
| 68 | + name: '李小红', | ||
| 69 | + age: 30, | ||
| 70 | + address: '上海市浦东新区世纪大道', | ||
| 71 | + province: '上海市', | ||
| 72 | + city: '浦东新区', | ||
| 73 | + zip: 100000 | ||
| 74 | + }, | ||
| 75 | + { | ||
| 76 | + name: '周小伟', | ||
| 77 | + age: 26, | ||
| 78 | + address: '深圳市南山区深南大道', | ||
| 79 | + province: '广东', | ||
| 80 | + city: '南山区', | ||
| 81 | + zip: 100000 | ||
| 254 | } | 82 | } |
| 255 | ] | 83 | ] |
| 256 | } | 84 | } |
| 257 | - }, | ||
| 258 | - methods: { | ||
| 259 | - exportData (type) { | ||
| 260 | - if (type === 1) { | ||
| 261 | - this.$refs.table.exportCsv({ | ||
| 262 | - filename: '原始数据' | ||
| 263 | - }); | ||
| 264 | - } else if (type === 2) { | ||
| 265 | - this.$refs.table.exportCsv({ | ||
| 266 | - filename: '排序和过滤后的数据', | ||
| 267 | - original: false | ||
| 268 | - }); | ||
| 269 | - } else if (type === 3) { | ||
| 270 | - this.$refs.table.exportCsv({ | ||
| 271 | - filename: '自定义数据', | ||
| 272 | - columns: this.columns8.filter((col, index) => index < 4), | ||
| 273 | - data: this.data7.filter((data, index) => index < 4) | ||
| 274 | - }); | ||
| 275 | - } | ||
| 276 | - } | ||
| 277 | } | 85 | } |
| 278 | } | 86 | } |
| 279 | </script> | 87 | </script> |