other / mew-iview

Commit ceeb9361fd0cf3fbd4130688c52594acd842948f

Authored by 梁灏
1 parent 504f8c52

fixed Table bug in Vue 2.5.13

Showing 4 changed files with 52 additions and 890 deletions   Show diff stats
Inline Side-by-side
build/webpack.base.config.js
  Show/Hide comments   View file @ceeb936
@@ -63,7 +63,7 @@ module.exports = { @@ -63,7 +63,7 @@ module.exports = {
63 resolve: { 63 resolve: {
64 extensions: ['.js', '.vue'], 64 extensions: ['.js', '.vue'],
65 alias: { 65 alias: {
66 - 'vue': 'vue/dist/vue.esm.js', 66 + 'vue': 'vue/dist/vue.runtime.js',
67 '@': resolve('src') 67 '@': resolve('src')
68 } 68 }
69 }, 69 },
build/webpack.dev.config.js
  Show/Hide comments   View file @ceeb936
@@ -27,8 +27,8 @@ module.exports = merge(webpackBaseConfig, { @@ -27,8 +27,8 @@ module.exports = merge(webpackBaseConfig, {
27 resolve: { 27 resolve: {
28 alias: { 28 alias: {
29 iview: '../../src/index', 29 iview: '../../src/index',
30 - vue: 'vue/dist/vue.esm.js'  
31 - // vue: 'vue/dist/vue.runtime.js' 30 + // vue: 'vue/dist/vue.esm.js'
  31 + vue: 'vue/dist/vue.runtime.js'
32 } 32 }
33 }, 33 },
34 plugins: [ 34 plugins: [
examples/routers/table.vue
  Show/Hide comments   View file @ceeb936
1 -<!--<template>-->  
2 - <!--<div>-->  
3 - <!--<Table width="550" height="200" highlight-row :loading="loading" :columns="columns3" :data="data1" ref="table" @on-current-change="handleChange" @on-row-click="rc">-->  
4 - <!--<div slot="loading">-->  
5 - <!--<Icon type="load-c" size=18 class="demo-spin-icon-load"></Icon>-->  
6 - <!--<div>Loading</div>-->  
7 - <!--</div>-->  
8 - <!--</Table>-->  
9 - <!--<br><br>-->  
10 - <!--<Button @click="handleClear">clear</Button>-->  
11 - <!--<Button @click="loading = !loading">Loading</Button>-->  
12 - <!--</div>-->  
13 -<!--</template>-->  
14 -<!--<script>-->  
15 - <!--export default {-->  
16 - <!--data () {-->  
17 - <!--return {-->  
18 - <!--loading: false,-->  
19 - <!--columns3: [-->  
20 - <!--{-->  
21 - <!--title: '姓名',-->  
22 - <!--key: 'name',-->  
23 - <!--width: 100,-->  
24 - <!--fixed: 'left'-->  
25 - <!--},-->  
26 - <!--{-->  
27 - <!--title: '年龄',-->  
28 - <!--key: 'age',-->  
29 - <!--width: 100-->  
30 - <!--},-->  
31 - <!--{-->  
32 - <!--title: '省份',-->  
33 - <!--key: 'province',-->  
34 - <!--width: 100-->  
35 - <!--},-->  
36 - <!--{-->  
37 - <!--title: '市区',-->  
38 - <!--key: 'city',-->  
39 - <!--width: 100-->  
40 - <!--},-->  
41 - <!--{-->  
42 - <!--title: '地址',-->  
43 - <!--key: 'address',-->  
44 - <!--width: 200-->  
45 - <!--},-->  
46 - <!--{-->  
47 - <!--title: '邮编',-->  
48 - <!--key: 'zip',-->  
49 - <!--width: 100-->  
50 - <!--},-->  
51 - <!--{-->  
52 - <!--title: '操作',-->  
53 - <!--key: 'action',-->  
54 - <!--fixed: 'right',-->  
55 - <!--width: 120,-->  
56 - <!--render: (h, params) => {-->  
57 - <!--return h('div', [-->  
58 - <!--h('Button', {-->  
59 - <!--props: {-->  
60 - <!--type: 'text',-->  
61 - <!--size: 'small'-->  
62 - <!--}-->  
63 - <!--}, '查看'),-->  
64 - <!--h('Button', {-->  
65 - <!--props: {-->  
66 - <!--type: 'text',-->  
67 - <!--size: 'small'-->  
68 - <!--}-->  
69 - <!--}, '编辑')-->  
70 - <!--]);-->  
71 - <!--}-->  
72 - <!--}-->  
73 - <!--],-->  
74 - <!--data1: [-->  
75 - <!--{-->  
76 - <!--name: '王小明',-->  
77 - <!--age: 18,-->  
78 - <!--address: '北京市朝阳区芍药居'-->  
79 - <!--},-->  
80 - <!--{-->  
81 - <!--name: '张小刚',-->  
82 - <!--age: 25,-->  
83 - <!--address: '北京市海淀区西二旗'-->  
84 - <!--},-->  
85 - <!--{-->  
86 - <!--name: '李小红',-->  
87 - <!--age: 30,-->  
88 - <!--address: '上海市浦东新区世纪大道'-->  
89 - <!--},-->  
90 - <!--{-->  
91 - <!--name: '周小伟',-->  
92 - <!--age: 26,-->  
93 - <!--address: '深圳市南山区深南大道'-->  
94 - <!--}-->  
95 - <!--]-->  
96 - <!--}-->  
97 - <!--},-->  
98 - <!--methods: {-->  
99 - <!--handleClear () {-->  
100 - <!--this.$refs.table.clearCurrentRow();-->  
101 - <!--},-->  
102 - <!--handleChange (newData, oldData) {-->  
103 -<!--// console.log(newData, oldData)-->  
104 - <!--},-->  
105 - <!--rc (data, index) {-->  
106 - <!--console.log(data, index);-->  
107 - <!--}-->  
108 - <!--}-->  
109 - <!--}-->  
110 -<!--</script>-->  
111 -  
112 -<!--<style scoped>-->  
113 - <!--.layout{-->  
114 - <!--border: 1px solid #d7dde4;-->  
115 - <!--background: #f5f7f9;-->  
116 - <!--position: relative;-->  
117 - <!--border-radius: 4px;-->  
118 - <!--overflow: hidden;-->  
119 - <!--}-->  
120 - <!--.layout-breadcrumb{-->  
121 - <!--padding: 10px 15px 0;-->  
122 - <!--}-->  
123 - <!--.layout-content{-->  
124 - <!--min-height: 200px;-->  
125 - <!--margin: 15px;-->  
126 - <!--overflow: hidden;-->  
127 - <!--background: #fff;-->  
128 - <!--border-radius: 4px;-->  
129 - <!--}-->  
130 - <!--.layout-content-main{-->  
131 - <!--padding: 10px;-->  
132 - <!--}-->  
133 - <!--.layout-copy{-->  
134 - <!--text-align: center;-->  
135 - <!--padding: 10px 0 20px;-->  
136 - <!--color: #9ea7b4;-->  
137 - <!--}-->  
138 - <!--.layout-menu-left{-->  
139 - <!--background: #464c5b;-->  
140 - <!--}-->  
141 - <!--.layout-header{-->  
142 - <!--height: 60px;-->  
143 - <!--background: #fff;-->  
144 - <!--box-shadow: 0 1px 1px rgba(0,0,0,.1);-->  
145 - <!--}-->  
146 - <!--.layout-logo-left{-->  
147 - <!--width: 90%;-->  
148 - <!--height: 30px;-->  
149 - <!--background: #5b6270;-->  
150 - <!--border-radius: 3px;-->  
151 - <!--margin: 15px auto;-->  
152 - <!--}-->  
153 - <!--.layout-ceiling-main a{-->  
154 - <!--color: #9ba7b5;-->  
155 - <!--}-->  
156 - <!--.layout-hide-text .layout-text{-->  
157 - <!--display: none;-->  
158 - <!--}-->  
159 - <!--.ivu-col{-->  
160 - <!--/*transition: width .2s ease-in-out;*/-->  
161 - <!--}-->  
162 -<!--</style>-->  
163 -<!--<template>-->  
164 - <!--<div class="layout" :class="{'layout-hide-text': spanLeft < 5}">-->  
165 - <!--<Row type="flex">-->  
166 - <!--<Col :span="spanLeft" class="layout-menu-left">-->  
167 - <!--<Menu active-name="1" theme="dark" width="auto">-->  
168 - <!--<div class="layout-logo-left"></div>-->  
169 - <!--<MenuItem name="1">-->  
170 - <!--<Icon type="ios-navigate" :size="iconSize"></Icon>-->  
171 - <!--<span class="layout-text">选项 1</span>-->  
172 - <!--</MenuItem>-->  
173 - <!--<MenuItem name="2">-->  
174 - <!--<Icon type="ios-keypad" :size="iconSize"></Icon>-->  
175 - <!--<span class="layout-text">选项 2</span>-->  
176 - <!--</MenuItem>-->  
177 - <!--<MenuItem name="3">-->  
178 - <!--<Icon type="ios-analytics" :size="iconSize"></Icon>-->  
179 - <!--<span class="layout-text">选项 3</span>-->  
180 - <!--</MenuItem>-->  
181 - <!--</Menu>-->  
182 - <!--</Col>-->  
183 - <!--<Col :span="spanRight">-->  
184 - <!--<div class="layout-header">-->  
185 - <!--<Button type="text" @click="toggleClick">-->  
186 - <!--<Icon type="navicon" size="32"></Icon>-->  
187 - <!--</Button>-->  
188 - <!--</div>-->  
189 - <!--<div class="layout-breadcrumb">-->  
190 - <!--<Breadcrumb>-->  
191 - <!--<BreadcrumbItem href="#">首页</BreadcrumbItem>-->  
192 - <!--<BreadcrumbItem href="#">应用中心</BreadcrumbItem>-->  
193 - <!--<BreadcrumbItem>某应用</BreadcrumbItem>-->  
194 - <!--</Breadcrumb>-->  
195 - <!--</div>-->  
196 - <!--<div class="layout-content">-->  
197 - <!--<div class="layout-content-main">-->  
198 - <!--<Table stripe :columns="columns1" :data="data1"></Table>-->  
199 - <!--</div>-->  
200 - <!--<hr style="margin: 10px 0;" />-->  
201 - <!--<div class="layout-content-main">-->  
202 - <!--<Table stripe :columns="columns2" :data="data2" ref="csvTable" @on-row-click="cc" />-->  
203 - <!--<i-button type="primary" size="large" @click="exportCSV">-->  
204 - <!--<icon type="ios-download-outline"></icon> Export to CSV-->  
205 - <!--</i-button>-->  
206 - <!--</div>-->  
207 - <!--</div>-->  
208 - <!--</Col>-->  
209 - <!--</Row>-->  
210 - <!--</div>-->  
211 -<!--</template>-->  
212 -<!--<script>-->  
213 - <!--export default {-->  
214 - <!--data () {-->  
215 - <!--return {-->  
216 - <!--spanLeft: 5,-->  
217 - <!--spanRight: 19,-->  
218 - <!--columns1: [-->  
219 - <!--{-->  
220 - <!--title: '姓名',-->  
221 - <!--key: 'name'-->  
222 - <!--},-->  
223 - <!--{-->  
224 - <!--title: '年龄',-->  
225 - <!--key: 'age'-->  
226 - <!--},-->  
227 - <!--{-->  
228 - <!--title: '地址',-->  
229 - <!--key: 'address'-->  
230 - <!--},-->  
231 - <!--{-->  
232 - <!--title: '姓名',-->  
233 - <!--key: 'name'-->  
234 - <!--},-->  
235 - <!--{-->  
236 - <!--title: '年龄',-->  
237 - <!--key: 'age'-->  
238 - <!--},-->  
239 - <!--{-->  
240 - <!--title: '地址',-->  
241 - <!--key: 'address'-->  
242 - <!--},-->  
243 - <!--{-->  
244 - <!--title: '姓名',-->  
245 - <!--key: 'name'-->  
246 - <!--},-->  
247 - <!--{-->  
248 - <!--title: '年龄',-->  
249 - <!--key: 'age'-->  
250 - <!--},-->  
251 - <!--{-->  
252 - <!--title: '地址',-->  
253 - <!--key: 'address'-->  
254 - <!--}-->  
255 - <!--],-->  
256 - <!--data1: [-->  
257 - <!--{-->  
258 - <!--name: '王小明',-->  
259 - <!--age: 18,-->  
260 - <!--address: '北京市朝阳区芍药居'-->  
261 - <!--},-->  
262 - <!--{-->  
263 - <!--name: '张小刚',-->  
264 - <!--age: 25,-->  
265 - <!--address: '北京市海淀区西二旗'-->  
266 - <!--},-->  
267 - <!--{-->  
268 - <!--name: '李小红',-->  
269 - <!--age: 30,-->  
270 - <!--address: '上海市浦东新区世纪大道'-->  
271 - <!--},-->  
272 - <!--{-->  
273 - <!--name: '周小伟',-->  
274 - <!--age: 26,-->  
275 - <!--address: '深圳市南山区深南大道'-->  
276 - <!--},-->  
277 - <!--{-->  
278 - <!--name: '王小明',-->  
279 - <!--age: 18,-->  
280 - <!--address: '北京市朝阳区芍药居'-->  
281 - <!--},-->  
282 - <!--{-->  
283 - <!--name: '张小刚',-->  
284 - <!--age: 25,-->  
285 - <!--address: '北京市海淀区西二旗'-->  
286 - <!--},-->  
287 - <!--{-->  
288 - <!--name: '李小红',-->  
289 - <!--age: 30,-->  
290 - <!--address: '上海市浦东新区世纪大道'-->  
291 - <!--},-->  
292 - <!--{-->  
293 - <!--name: '周小伟',-->  
294 - <!--age: 26,-->  
295 - <!--address: '深圳市南山区深南大道'-->  
296 - <!--},-->  
297 - <!--{-->  
298 - <!--name: '王小明',-->  
299 - <!--age: 18,-->  
300 - <!--address: '北京市朝阳区芍药居'-->  
301 - <!--},-->  
302 - <!--{-->  
303 - <!--name: '张小刚',-->  
304 - <!--age: 25,-->  
305 - <!--address: '北京市海淀区西二旗'-->  
306 - <!--},-->  
307 - <!--{-->  
308 - <!--name: '李小红',-->  
309 - <!--age: 30,-->  
310 - <!--address: '上海市浦东新区世纪大道'-->  
311 - <!--},-->  
312 - <!--{-->  
313 - <!--name: '周小伟',-->  
314 - <!--age: 26,-->  
315 - <!--address: '深圳市南山区深南大道'-->  
316 - <!--},-->  
317 - <!--{-->  
318 - <!--name: '王小明',-->  
319 - <!--age: 18,-->  
320 - <!--address: '北京市朝阳区芍药居'-->  
321 - <!--},-->  
322 - <!--{-->  
323 - <!--name: '张小刚',-->  
324 - <!--age: 25,-->  
325 - <!--address: '北京市海淀区西二旗'-->  
326 - <!--},-->  
327 - <!--{-->  
328 - <!--name: '李小红',-->  
329 - <!--age: 30,-->  
330 - <!--address: '上海市浦东新区世纪大道'-->  
331 - <!--},-->  
332 - <!--{-->  
333 - <!--name: '周小伟',-->  
334 - <!--age: 26,-->  
335 - <!--address: '深圳市南山区深南大道'-->  
336 - <!--}-->  
337 - <!--],-->  
338 - <!--columns2: [-->  
339 - <!--{-->  
340 - <!--title: '姓名',-->  
341 - <!--key: 'name'-->  
342 - <!--},-->  
343 - <!--{-->  
344 - <!--title: '年龄',-->  
345 - <!--key: 'age'-->  
346 - <!--},-->  
347 - <!--{-->  
348 - <!--title: '地址',-->  
349 - <!--key: 'address',-->  
350 - <!--render: (h) => {-->  
351 - <!--return h('Button', {-->  
352 - <!--nativeOn: {-->  
353 - <!--click: (event) => {-->  
354 - <!--console.log(2)-->  
355 - <!--event.stopPropagation();-->  
356 - <!--}-->  
357 - <!--}-->  
358 - <!--}, 'click')-->  
359 - <!--}-->  
360 - <!--}-->  
361 - <!--],-->  
362 - <!--data2: [-->  
363 - <!--{-->  
364 - <!--name: '王小明',-->  
365 - <!--age: 18,-->  
366 - <!--address: '北京市朝\n阳区芍药居'-->  
367 - <!--},-->  
368 - <!--{-->  
369 - <!--name: '张小刚',-->  
370 - <!--age: 25,-->  
371 - <!--address: '北京市海,淀区西二旗'-->  
372 - <!--},-->  
373 - <!--{-->  
374 - <!--name: '李小红',-->  
375 - <!--age: 30,-->  
376 - <!--address: '上海市浦东\r新区世纪大道'-->  
377 - <!--},-->  
378 - <!--{-->  
379 - <!--name: '周小伟',-->  
380 - <!--age: 26,-->  
381 - <!--address: '深圳市南山区深南大道'-->  
382 - <!--}-->  
383 - <!--]-->  
384 - <!--};-->  
385 - <!--},-->  
386 - <!--computed: {-->  
387 - <!--iconSize () {-->  
388 - <!--return this.spanLeft === 5 ? 14 : 24;-->  
389 - <!--}-->  
390 - <!--},-->  
391 - <!--methods: {-->  
392 - <!--toggleClick () {-->  
393 - <!--if (this.spanLeft === 5) {-->  
394 - <!--this.spanLeft = 2;-->  
395 - <!--this.spanRight = 22;-->  
396 - <!--} else {-->  
397 - <!--this.spanLeft = 5;-->  
398 - <!--this.spanRight = 19;-->  
399 - <!--}-->  
400 - <!--},-->  
401 - <!--exportCSV () {-->  
402 - <!--this.$refs.csvTable.exportCsv({-->  
403 - <!--filename: '原始数据',-->  
404 - <!--separator: ';',-->  
405 - <!--quoted: true-->  
406 - <!--});-->  
407 - <!--},-->  
408 - <!--cc () {-->  
409 - <!--console.log(1)-->  
410 - <!--}-->  
411 - <!--}-->  
412 - <!--};-->  
413 -<!--</script>-->  
414 -  
415 -<!--<template>-->  
416 - <!--<div>-->  
417 - <!--<Table :columns="columns8" :data="data7" size="small" ref="table"></Table>-->  
418 - <!--<br>-->  
419 - <!--<Button type="primary" size="large" @click="exportData(1)"><Icon type="ios-download-outline"></Icon> 导出原始数据</Button>-->  
420 - <!--<Button type="primary" size="large" @click="exportData(2)"><Icon type="ios-download-outline"></Icon> 导出排序和过滤后的数据</Button>-->  
421 - <!--<Button type="primary" size="large" @click="exportData(3)"><Icon type="ios-download-outline"></Icon> 导出自定义数据</Button>-->  
422 - <!--</div>-->  
423 -<!--</template>-->  
424 -<!--<script>-->  
425 - <!--export default {-->  
426 - <!--data () {-->  
427 - <!--return {-->  
428 - <!--columns8: [-->  
429 - <!--{-->  
430 - <!--"title": "名称",-->  
431 - <!--"key": "name",-->  
432 - <!--"fixed": "left",-->  
433 - <!--"width": 200-->  
434 - <!--},-->  
435 - <!--{-->  
436 - <!--"title": "展示",-->  
437 - <!--"key": "show",-->  
438 - <!--"width": 150,-->  
439 - <!--"sortable": true,-->  
440 - <!--filters: [-->  
441 - <!--{-->  
442 - <!--label: '大于4000',-->  
443 - <!--value: 1-->  
444 - <!--},-->  
445 - <!--{-->  
446 - <!--label: '小于4000',-->  
447 - <!--value: 2-->  
448 - <!--}-->  
449 - <!--],-->  
450 - <!--filterMultiple: false,-->  
451 - <!--filterMethod (value, row) {-->  
452 - <!--if (value === 1) {-->  
453 - <!--return row.show > 4000;-->  
454 - <!--} else if (value === 2) {-->  
455 - <!--return row.show < 4000;-->  
456 - <!--}-->  
457 - <!--}-->  
458 - <!--},-->  
459 - <!--{-->  
460 - <!--"title": "唤醒",-->  
461 - <!--"key": "weak",-->  
462 - <!--"width": 150,-->  
463 - <!--"sortable": true-->  
464 - <!--},-->  
465 - <!--{-->  
466 - <!--"title": "登录",-->  
467 - <!--"key": "signin",-->  
468 - <!--"width": 150,-->  
469 - <!--"sortable": true-->  
470 - <!--},-->  
471 - <!--{-->  
472 - <!--"title": "点击",-->  
473 - <!--"key": "click",-->  
474 - <!--"width": 150,-->  
475 - <!--"sortable": true-->  
476 - <!--},-->  
477 - <!--{-->  
478 - <!--"title": "激活",-->  
479 - <!--"key": "active",-->  
480 - <!--"width": 150,-->  
481 - <!--"sortable": true-->  
482 - <!--},-->  
483 - <!--{-->  
484 - <!--"title": "7日留存",-->  
485 - <!--"key": "day7",-->  
486 - <!--"width": 150,-->  
487 - <!--"sortable": true-->  
488 - <!--},-->  
489 - <!--{-->  
490 - <!--"title": "30日留存",-->  
491 - <!--"key": "day30",-->  
492 - <!--"width": 150,-->  
493 - <!--"sortable": true-->  
494 - <!--},-->  
495 - <!--{-->  
496 - <!--"title": "次日留存",-->  
497 - <!--"key": "tomorrow",-->  
498 - <!--"width": 150,-->  
499 - <!--"sortable": true-->  
500 - <!--},-->  
501 - <!--{-->  
502 - <!--"title": "日活跃",-->  
503 - <!--"key": "day",-->  
504 - <!--"width": 150,-->  
505 - <!--"sortable": true-->  
506 - <!--},-->  
507 - <!--{-->  
508 - <!--"title": "周活跃",-->  
509 - <!--"key": "week",-->  
510 - <!--"width": 150,-->  
511 - <!--"sortable": true-->  
512 - <!--},-->  
513 - <!--{-->  
514 - <!--"title": "月活跃",-->  
515 - <!--"key": "month",-->  
516 - <!--"width": 150,-->  
517 - <!--"sortable": true-->  
518 - <!--}-->  
519 - <!--],-->  
520 - <!--data7: [-->  
521 - <!--{-->  
522 - <!--"name": "推广名称1",-->  
523 - <!--"fav": 0,-->  
524 - <!--"show": 7302,-->  
525 - <!--"weak": 5627,-->  
526 - <!--"signin": 1563,-->  
527 - <!--"click": 4254,-->  
528 - <!--"active": 1438,-->  
529 - <!--"day7": 274,-->  
530 - <!--"day30": 285,-->  
531 - <!--"tomorrow": 1727,-->  
532 - <!--"day": 558,-->  
533 - <!--"week": 4440,-->  
534 - <!--"month": 5610-->  
535 - <!--},-->  
536 - <!--{-->  
537 - <!--"name": "推广名称2",-->  
538 - <!--"fav": 0,-->  
539 - <!--"show": 4720,-->  
540 - <!--"weak": 4086,-->  
541 - <!--"signin": 3792,-->  
542 - <!--"click": 8690,-->  
543 - <!--"active": 8470,-->  
544 - <!--"day7": 8172,-->  
545 - <!--"day30": 5197,-->  
546 - <!--"tomorrow": 1684,-->  
547 - <!--"day": 2593,-->  
548 - <!--"week": 2507,-->  
549 - <!--"month": 1537-->  
550 - <!--},-->  
551 - <!--{-->  
552 - <!--"name": "推广名称3",-->  
553 - <!--"fav": 0,-->  
554 - <!--"show": 7181,-->  
555 - <!--"weak": 8007,-->  
556 - <!--"signin": 8477,-->  
557 - <!--"click": 1879,-->  
558 - <!--"active": 16,-->  
559 - <!--"day7": 2249,-->  
560 - <!--"day30": 3450,-->  
561 - <!--"tomorrow": 377,-->  
562 - <!--"day": 1561,-->  
563 - <!--"week": 3219,-->  
564 - <!--"month": 1588-->  
565 - <!--},-->  
566 - <!--{-->  
567 - <!--"name": "推广名称4",-->  
568 - <!--"fav": 0,-->  
569 - <!--"show": 9911,-->  
570 - <!--"weak": 8976,-->  
571 - <!--"signin": 8807,-->  
572 - <!--"click": 8050,-->  
573 - <!--"active": 7668,-->  
574 - <!--"day7": 1547,-->  
575 - <!--"day30": 2357,-->  
576 - <!--"tomorrow": 7278,-->  
577 - <!--"day": 5309,-->  
578 - <!--"week": 1655,-->  
579 - <!--"month": 9043-->  
580 - <!--},-->  
581 - <!--{-->  
582 - <!--"name": "推广名称5",-->  
583 - <!--"fav": 0,-->  
584 - <!--"show": 934,-->  
585 - <!--"weak": 1394,-->  
586 - <!--"signin": 6463,-->  
587 - <!--"click": 5278,-->  
588 - <!--"active": 9256,-->  
589 - <!--"day7": 209,-->  
590 - <!--"day30": 3563,-->  
591 - <!--"tomorrow": 8285,-->  
592 - <!--"day": 1230,-->  
593 - <!--"week": 4840,-->  
594 - <!--"month": 9908-->  
595 - <!--},-->  
596 - <!--{-->  
597 - <!--"name": "推广名称6",-->  
598 - <!--"fav": 0,-->  
599 - <!--"show": 6856,-->  
600 - <!--"weak": 1608,-->  
601 - <!--"signin": 457,-->  
602 - <!--"click": 4949,-->  
603 - <!--"active": 2909,-->  
604 - <!--"day7": 4525,-->  
605 - <!--"day30": 6171,-->  
606 - <!--"tomorrow": 1920,-->  
607 - <!--"day": 1966,-->  
608 - <!--"week": 904,-->  
609 - <!--"month": 6851-->  
610 - <!--},-->  
611 - <!--{-->  
612 - <!--"name": "推广名称7",-->  
613 - <!--"fav": 0,-->  
614 - <!--"show": 5107,-->  
615 - <!--"weak": 6407,-->  
616 - <!--"signin": 4166,-->  
617 - <!--"click": 7970,-->  
618 - <!--"active": 1002,-->  
619 - <!--"day7": 8701,-->  
620 - <!--"day30": 9040,-->  
621 - <!--"tomorrow": 7632,-->  
622 - <!--"day": 4061,-->  
623 - <!--"week": 4359,-->  
624 - <!--"month": 3676-->  
625 - <!--},-->  
626 - <!--{-->  
627 - <!--"name": "推广名称8",-->  
628 - <!--"fav": 0,-->  
629 - <!--"show": 862,-->  
630 - <!--"weak": 6520,-->  
631 - <!--"signin": 6696,-->  
632 - <!--"click": 3209,-->  
633 - <!--"active": 6801,-->  
634 - <!--"day7": 6364,-->  
635 - <!--"day30": 6850,-->  
636 - <!--"tomorrow": 9408,-->  
637 - <!--"day": 2481,-->  
638 - <!--"week": 1479,-->  
639 - <!--"month": 2346-->  
640 - <!--},-->  
641 - <!--{-->  
642 - <!--"name": "推广名称9",-->  
643 - <!--"fav": 0,-->  
644 - <!--"show": 567,-->  
645 - <!--"weak": 5859,-->  
646 - <!--"signin": 128,-->  
647 - <!--"click": 6593,-->  
648 - <!--"active": 1971,-->  
649 - <!--"day7": 7596,-->  
650 - <!--"day30": 3546,-->  
651 - <!--"tomorrow": 6641,-->  
652 - <!--"day": 1611,-->  
653 - <!--"week": 5534,-->  
654 - <!--"month": 3190-->  
655 - <!--},-->  
656 - <!--{-->  
657 - <!--"name": "推广名称10",-->  
658 - <!--"fav": 0,-->  
659 - <!--"show": 3651,-->  
660 - <!--"weak": 1819,-->  
661 - <!--"signin": 4595,-->  
662 - <!--"click": 7499,-->  
663 - <!--"active": 7405,-->  
664 - <!--"day7": 8710,-->  
665 - <!--"day30": 5518,-->  
666 - <!--"tomorrow": 428,-->  
667 - <!--"day": 9768,-->  
668 - <!--"week": 2864,-->  
669 - <!--"month": 5811-->  
670 - <!--}-->  
671 - <!--]-->  
672 - <!--}-->  
673 - <!--},-->  
674 - <!--methods: {-->  
675 - <!--exportData (type) {-->  
676 - <!--if (type === 1) {-->  
677 - <!--this.$refs.table.exportCsv({-->  
678 - <!--filename: '原始数据',-->  
679 - <!--separator: ';',-->  
680 - <!--quoted: true,-->  
681 - <!--callback (data) {-->  
682 - <!--console.log(data);-->  
683 - <!--}-->  
684 - <!--});-->  
685 - <!--} else if (type === 2) {-->  
686 - <!--this.$refs.table.exportCsv({-->  
687 - <!--filename: '排序和过滤后的数据',-->  
688 - <!--original: false-->  
689 - <!--});-->  
690 - <!--} else if (type === 3) {-->  
691 - <!--this.$refs.table.exportCsv({-->  
692 - <!--filename: '自定义数据',-->  
693 - <!--columns: this.columns8.filter((col, index) => index < 4),-->  
694 - <!--data: this.data7.filter((data, index) => index < 4)-->  
695 - <!--});-->  
696 - <!--}-->  
697 - <!--}-->  
698 - <!--}-->  
699 - <!--}-->  
700 -<!--</script>-->  
701 -  
702 -<!--<template>-->  
703 - <!--<Table :columns="columns10" :data="data9"></Table>-->  
704 -<!--</template>-->  
705 -<!--<script>-->  
706 - <!--import expandRow from '../components/tableExpand.vue';-->  
707 - <!--export default {-->  
708 - <!--components: { expandRow },-->  
709 - <!--data () {-->  
710 - <!--return {-->  
711 - <!--columns10: [-->  
712 - <!--{-->  
713 - <!--type: 'expand',-->  
714 - <!--width: 50,-->  
715 - <!--render: (h, params) => {-->  
716 - <!--return h(expandRow, {-->  
717 - <!--props: {-->  
718 - <!--row: params.row-->  
719 - <!--}-->  
720 - <!--})-->  
721 - <!--}-->  
722 - <!--},-->  
723 - <!--{-->  
724 - <!--title: 'Name',-->  
725 - <!--key: 'name'-->  
726 - <!--},-->  
727 - <!--{-->  
728 - <!--title: 'Age',-->  
729 - <!--key: 'age',-->  
730 - <!--fixed: 'right'-->  
731 - <!--},-->  
732 - <!--{-->  
733 - <!--title: 'Address',-->  
734 - <!--key: 'address',-->  
735 - <!--fixed: 'right'-->  
736 - <!--}-->  
737 - <!--],-->  
738 - <!--data9: [-->  
739 - <!--{-->  
740 - <!--name: 'John Brown',-->  
741 - <!--age: 18,-->  
742 - <!--address: 'New York No. 1 Lake Park',-->  
743 - <!--job: 'Data engineer',-->  
744 - <!--interest: 'badminton',-->  
745 - <!--birthday: '1991-05-14',-->  
746 - <!--book: 'Steve Jobs',-->  
747 - <!--movie: 'The Prestige',-->  
748 - <!--music: 'I Cry'-->  
749 - <!--},-->  
750 - <!--{-->  
751 - <!--name: 'Jim Green',-->  
752 - <!--age: 25,-->  
753 - <!--address: 'London No. 1 Lake Park',-->  
754 - <!--job: 'Data Scientist',-->  
755 - <!--interest: 'volleyball',-->  
756 - <!--birthday: '1989-03-18',-->  
757 - <!--book: 'My Struggle',-->  
758 - <!--movie: 'Roman Holiday',-->  
759 - <!--music: 'My Heart Will Go On'-->  
760 - <!--},-->  
761 - <!--{-->  
762 - <!--name: 'Joe Black',-->  
763 - <!--age: 30,-->  
764 - <!--address: 'Sydney No. 1 Lake Park',-->  
765 - <!--job: 'Data Product Manager',-->  
766 - <!--interest: 'tennis',-->  
767 - <!--birthday: '1992-01-31',-->  
768 - <!--book: 'Win',-->  
769 - <!--movie: 'Jobs',-->  
770 - <!--music: 'Don’t Cry'-->  
771 - <!--},-->  
772 - <!--{-->  
773 - <!--name: 'Jon Snow',-->  
774 - <!--age: 26,-->  
775 - <!--address: 'Ottawa No. 2 Lake Park',-->  
776 - <!--job: 'Data Analyst',-->  
777 - <!--interest: 'snooker',-->  
778 - <!--birthday: '1988-7-25',-->  
779 - <!--book: 'A Dream in Red Mansions',-->  
780 - <!--movie: 'A Chinese Ghost Story',-->  
781 - <!--music: 'actor'-->  
782 - <!--}-->  
783 - <!--]-->  
784 - <!--}-->  
785 - <!--}-->  
786 - <!--}-->  
787 -<!--</script>-->  
788 -  
789 -  
790 <template> 1 <template>
791 - <div>  
792 - <div style="width: 550px;">  
793 - <Table height="200" border :columns="columns2" :data="data4"></Table>  
794 - </div>  
795 - <br><br><br>  
796 - <Table width="550" height="200" border :columns="columns2" :data="data4"></Table>  
797 - </div> 2 + <Table border :columns="columns6" :data="data5"></Table>
798 </template> 3 </template>
799 <script> 4 <script>
800 export default { 5 export default {
801 data () { 6 data () {
802 return { 7 return {
803 - columns2: [ 8 + columns6: [
  9 + {
  10 + title: 'Date',
  11 + key: 'date'
  12 + },
804 { 13 {
805 title: 'Name', 14 title: 'Name',
806 - key: 'name',  
807 - width: 100,  
808 -// fixed: 'left' 15 + key: 'name'
809 }, 16 },
810 { 17 {
811 title: 'Age', 18 title: 'Age',
812 key: 'age', 19 key: 'age',
813 - width: 100  
814 - },  
815 - {  
816 - title: 'Province',  
817 - key: 'province',  
818 - width: 100  
819 - },  
820 - {  
821 - title: 'City',  
822 - key: 'city',  
823 - width: 100 20 + filters: [
  21 + {
  22 + label: 'Greater than 25',
  23 + value: 1
  24 + },
  25 + {
  26 + label: 'Less than 25',
  27 + value: 2
  28 + }
  29 + ],
  30 + filterMultiple: false,
  31 + filterMethod (value, row) {
  32 + if (value === 1) {
  33 + return row.age > 25;
  34 + } else if (value === 2) {
  35 + return row.age < 25;
  36 + }
  37 + }
824 }, 38 },
825 { 39 {
826 title: 'Address', 40 title: 'Address',
827 key: 'address', 41 key: 'address',
828 - width: 200  
829 - },  
830 - {  
831 - title: 'Postcode',  
832 - key: 'zip',  
833 - width: 100  
834 - },  
835 - {  
836 - title: 'Action',  
837 - key: 'action',  
838 - fixed: 'right',  
839 - width: 120,  
840 - render: (h, params) => {  
841 - return h('div', [  
842 - h('Button', {  
843 - props: {  
844 - type: 'text',  
845 - size: 'small'  
846 - }  
847 - }, 'View'),  
848 - h('Button', {  
849 - props: {  
850 - type: 'text',  
851 - size: 'small'  
852 - }  
853 - }, 'Edit')  
854 - ]); 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;
855 } 58 }
856 } 59 }
857 ], 60 ],
858 - data4: [ 61 + data5: [
859 { 62 {
860 name: 'John Brown', 63 name: 'John Brown',
861 age: 18, 64 age: 18,
862 address: 'New York No. 1 Lake Park', 65 address: 'New York No. 1 Lake Park',
863 - province: 'America',  
864 - city: 'New York',  
865 - zip: 100000 66 + date: '2016-10-03'
866 }, 67 },
867 { 68 {
868 name: 'Jim Green', 69 name: 'Jim Green',
869 age: 24, 70 age: 24,
870 - address: 'Washington, D.C. No. 1 Lake Park',  
871 - province: 'America',  
872 - city: 'Washington, D.C.',  
873 - zip: 100000 71 + address: 'London No. 1 Lake Park',
  72 + date: '2016-10-01'
874 }, 73 },
875 { 74 {
876 name: 'Joe Black', 75 name: 'Joe Black',
877 age: 30, 76 age: 30,
878 address: 'Sydney No. 1 Lake Park', 77 address: 'Sydney No. 1 Lake Park',
879 - province: 'Australian',  
880 - city: 'Sydney',  
881 - zip: 100000 78 + date: '2016-10-02'
882 }, 79 },
883 { 80 {
884 name: 'Jon Snow', 81 name: 'Jon Snow',
885 age: 26, 82 age: 26,
886 address: 'Ottawa No. 2 Lake Park', 83 address: 'Ottawa No. 2 Lake Park',
887 - province: 'Canada',  
888 - city: 'Ottawa',  
889 - zip: 100000  
890 - },  
891 - {  
892 - name: 'John Brown',  
893 - age: 18,  
894 - address: 'New York No. 1 Lake Park',  
895 - province: 'America',  
896 - city: 'New York',  
897 - zip: 100000  
898 - },  
899 - {  
900 - name: 'Jim Green',  
901 - age: 24,  
902 - address: 'Washington, D.C. No. 1 Lake Park',  
903 - province: 'America',  
904 - city: 'Washington, D.C.',  
905 - zip: 100000  
906 - },  
907 - {  
908 - name: 'Joe Black',  
909 - age: 30,  
910 - address: 'Sydney No. 1 Lake Park',  
911 - province: 'Australian',  
912 - city: 'Sydney',  
913 - zip: 100000  
914 - },  
915 - {  
916 - name: 'Jon Snow',  
917 - age: 26,  
918 - address: 'Ottawa No. 2 Lake Park',  
919 - province: 'Canada',  
920 - city: 'Ottawa',  
921 - zip: 100000 84 + date: '2016-10-04'
922 } 85 }
923 - ] 86 + ],
924 } 87 }
925 } 88 }
926 } 89 }
927 </script> 90 </script>
928 -  
src/components/table/table-head.vue
  Show/Hide comments   View file @ceeb936
@@ -30,7 +30,7 @@ @@ -30,7 +30,7 @@
30 <div slot="content" :class="[prefixCls + '-filter-list']" v-if="column._filterMultiple"> 30 <div slot="content" :class="[prefixCls + '-filter-list']" v-if="column._filterMultiple">
31 <div :class="[prefixCls + '-filter-list-item']"> 31 <div :class="[prefixCls + '-filter-list-item']">
32 <checkbox-group v-model="column._filterChecked"> 32 <checkbox-group v-model="column._filterChecked">
33 - <checkbox v-for="item in column.filters" :key="column._columnKey" :label="item.value">{{ item.label }}</checkbox> 33 + <checkbox v-for="(item, index) in column.filters" :key="index" :label="item.value">{{ item.label }}</checkbox>
34 </checkbox-group> 34 </checkbox-group>
35 </div> 35 </div>
36 <div :class="[prefixCls + '-filter-footer']"> 36 <div :class="[prefixCls + '-filter-footer']">