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 | 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 | 3 | </template> |
| 8 | 4 | <script> |
| 9 | 5 | export default { |
| 10 | 6 | data () { |
| 11 | 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 | 87 | </script> | ... | ... |