Commit 2993f4eec375236a6abc3ae2bb91ac28c09d1f49
1 parent
af7d72b4
update Tab
Showing
2 changed files
with
245 additions
and
52 deletions
Show diff stats
examples/routers/table.vue
| @@ -413,97 +413,289 @@ | @@ -413,97 +413,289 @@ | ||
| 413 | <!--</script>--> | 413 | <!--</script>--> |
| 414 | 414 | ||
| 415 | <template> | 415 | <template> |
| 416 | - <Table border :columns="columns6" :data="data5" @on-filter-change="cc"></Table> | 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> | ||
| 417 | </template> | 423 | </template> |
| 418 | <script> | 424 | <script> |
| 419 | export default { | 425 | export default { |
| 420 | data () { | 426 | data () { |
| 421 | return { | 427 | return { |
| 422 | - columns6: [ | 428 | + columns8: [ |
| 423 | { | 429 | { |
| 424 | - title: '日期', | ||
| 425 | - key: 'date' | 430 | + "title": "名称", |
| 431 | + "key": "name", | ||
| 432 | + "fixed": "left", | ||
| 433 | + "width": 200 | ||
| 426 | }, | 434 | }, |
| 427 | { | 435 | { |
| 428 | - title: '姓名', | ||
| 429 | - key: 'name' | ||
| 430 | - }, | ||
| 431 | - { | ||
| 432 | - title: '年龄', | ||
| 433 | - key: 'age', | 436 | + "title": "展示", |
| 437 | + "key": "show", | ||
| 438 | + "width": 150, | ||
| 439 | + "sortable": true, | ||
| 434 | filters: [ | 440 | filters: [ |
| 435 | { | 441 | { |
| 436 | - label: '大于25岁', | 442 | + label: '大于4000', |
| 437 | value: 1 | 443 | value: 1 |
| 438 | }, | 444 | }, |
| 439 | { | 445 | { |
| 440 | - label: '小于25岁', | 446 | + label: '小于4000', |
| 441 | value: 2 | 447 | value: 2 |
| 442 | } | 448 | } |
| 443 | ], | 449 | ], |
| 444 | filterMultiple: false, | 450 | filterMultiple: false, |
| 445 | filterMethod (value, row) { | 451 | filterMethod (value, row) { |
| 446 | if (value === 1) { | 452 | if (value === 1) { |
| 447 | - return row.age > 25; | 453 | + return row.show > 4000; |
| 448 | } else if (value === 2) { | 454 | } else if (value === 2) { |
| 449 | - return row.age < 25; | 455 | + return row.show < 4000; |
| 450 | } | 456 | } |
| 451 | } | 457 | } |
| 452 | }, | 458 | }, |
| 453 | { | 459 | { |
| 454 | - title: '地址', | ||
| 455 | - key: 'address', | ||
| 456 | - filters: [ | ||
| 457 | - { | ||
| 458 | - label: '北京', | ||
| 459 | - value: '北京' | ||
| 460 | - }, | ||
| 461 | - { | ||
| 462 | - label: '上海', | ||
| 463 | - value: '上海' | ||
| 464 | - }, | ||
| 465 | - { | ||
| 466 | - label: '深圳', | ||
| 467 | - value: '深圳' | ||
| 468 | - } | ||
| 469 | - ], | ||
| 470 | - filterMethod (value, row) { | ||
| 471 | - return row.address.indexOf(value) > -1; | ||
| 472 | - } | 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 | ||
| 473 | } | 518 | } |
| 474 | ], | 519 | ], |
| 475 | - data5: [ | 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 | + }, | ||
| 476 | { | 566 | { |
| 477 | - name: '王小明', | ||
| 478 | - age: 18, | ||
| 479 | - address: '北京市朝阳区芍药居', | ||
| 480 | - date: '2016-10-03' | 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 | ||
| 481 | }, | 580 | }, |
| 482 | { | 581 | { |
| 483 | - name: '张小刚', | ||
| 484 | - age: 25, | ||
| 485 | - address: '北京市海淀区西二旗', | ||
| 486 | - date: '2016-10-01' | 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 | ||
| 487 | }, | 595 | }, |
| 488 | { | 596 | { |
| 489 | - name: '李小红', | ||
| 490 | - age: 30, | ||
| 491 | - address: '上海市浦东新区世纪大道', | ||
| 492 | - date: '2016-10-02' | 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 | ||
| 493 | }, | 610 | }, |
| 494 | { | 611 | { |
| 495 | - name: '周小伟', | ||
| 496 | - age: 26, | ||
| 497 | - address: '深圳市南山区深南大道', | ||
| 498 | - date: '2016-10-04' | 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 | ||
| 499 | } | 670 | } |
| 500 | ] | 671 | ] |
| 501 | } | 672 | } |
| 502 | }, | 673 | }, |
| 503 | methods: { | 674 | methods: { |
| 504 | - cc (dd) { | ||
| 505 | - console.log(dd); | 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 | + } | ||
| 506 | } | 697 | } |
| 507 | } | 698 | } |
| 508 | } | 699 | } |
| 509 | </script> | 700 | </script> |
| 701 | + |
src/components/tabs/tabs.vue
| @@ -155,6 +155,7 @@ | @@ -155,6 +155,7 @@ | ||
| 155 | updateBar () { | 155 | updateBar () { |
| 156 | this.$nextTick(() => { | 156 | this.$nextTick(() => { |
| 157 | const index = this.navList.findIndex((nav) => nav.name === this.activeKey); | 157 | const index = this.navList.findIndex((nav) => nav.name === this.activeKey); |
| 158 | + if (!this.$refs.nav) return; // 页面销毁时，这里会报错，为了解决 #2100 | ||
| 158 | const prevTabs = this.$refs.nav.querySelectorAll(`.${prefixCls}-tab`); | 159 | const prevTabs = this.$refs.nav.querySelectorAll(`.${prefixCls}-tab`); |
| 159 | const tab = prevTabs[index]; | 160 | const tab = prevTabs[index]; |
| 160 | this.barWidth = tab ? parseFloat(tab.offsetWidth) : 0; | 161 | this.barWidth = tab ? parseFloat(tab.offsetWidth) : 0; |