Commit 55f90d87decf4a8f1e6ece7ea1c454c2a976252b
1 parent
63199358
fixed #1648
Showing
4 changed files
with
386 additions
and
267 deletions
Show diff stats
examples/components/tableExpand.vue
| 1 | +<style scoped> | ||
| 2 | + .expand-row{ | ||
| 3 | + margin-bottom: 16px; | ||
| 4 | + } | ||
| 5 | +</style> | ||
| 1 | <template> | 6 | <template> |
| 2 | - <div>{{ name }}</div> | 7 | + <div> |
| 8 | + <Row class="expand-row"> | ||
| 9 | + <Col span="8"> | ||
| 10 | + <span class="expand-key">Job: </span> | ||
| 11 | + <span class="expand-value">{{ row.job }}</span> | ||
| 12 | + </Col> | ||
| 13 | + <Col span="8"> | ||
| 14 | + <span class="expand-key">Interest: </span> | ||
| 15 | + <span class="expand-value">{{ row.interest }}</span> | ||
| 16 | + </Col> | ||
| 17 | + <Col span="8"> | ||
| 18 | + <span class="expand-key">Birthday: </span> | ||
| 19 | + <span class="expand-value">{{ row.birthday }}</span> | ||
| 20 | + </Col> | ||
| 21 | + </Row> | ||
| 22 | + <Row> | ||
| 23 | + <Col span="8"> | ||
| 24 | + <span class="expand-key">Favorite book: </span> | ||
| 25 | + <span class="expand-value">《{{ row.book }}》</span> | ||
| 26 | + </Col> | ||
| 27 | + <Col span="8"> | ||
| 28 | + <span class="expand-key">Favorite movie: </span> | ||
| 29 | + <span class="expand-value">{{ row.movie }}</span> | ||
| 30 | + </Col> | ||
| 31 | + <Col span="8"> | ||
| 32 | + <span class="expand-key">Favorite music: </span> | ||
| 33 | + <span class="expand-value">{{ row.music }}</span> | ||
| 34 | + </Col> | ||
| 35 | + </Row> | ||
| 36 | + </div> | ||
| 3 | </template> | 37 | </template> |
| 4 | <script> | 38 | <script> |
| 5 | export default { | 39 | export default { |
| 6 | props: { | 40 | props: { |
| 7 | - name: String | ||
| 8 | - }, | ||
| 9 | - created () { | ||
| 10 | - console.log(this.name + ': 被创建'); | ||
| 11 | - }, | ||
| 12 | - destroyed () { | ||
| 13 | - console.log(this.name + ': 被销毁'); | 41 | + row: Object |
| 14 | } | 42 | } |
| 15 | - } | 43 | + }; |
| 16 | </script> | 44 | </script> |
| 17 | \ No newline at end of file | 45 | \ No newline at end of file |
examples/routers/table.vue
| @@ -412,289 +412,376 @@ | @@ -412,289 +412,376 @@ | ||
| 412 | <!--};--> | 412 | <!--};--> |
| 413 | <!--</script>--> | 413 | <!--</script>--> |
| 414 | 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 | + | ||
| 415 | <template> | 702 | <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> | 703 | + <Table :columns="columns10" :data="data9"></Table> |
| 423 | </template> | 704 | </template> |
| 424 | <script> | 705 | <script> |
| 706 | + import expandRow from '../components/tableExpand.vue'; | ||
| 425 | export default { | 707 | export default { |
| 708 | + components: { expandRow }, | ||
| 426 | data () { | 709 | data () { |
| 427 | return { | 710 | return { |
| 428 | - columns8: [ | ||
| 429 | - { | ||
| 430 | - "title": "名称", | ||
| 431 | - "key": "name", | ||
| 432 | - "fixed": "left", | ||
| 433 | - "width": 200 | ||
| 434 | - }, | 711 | + columns10: [ |
| 435 | { | 712 | { |
| 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 | - } | 713 | + type: 'expand', |
| 714 | + width: 50, | ||
| 715 | + render: (h, params) => { | ||
| 716 | + return h(expandRow, { | ||
| 717 | + props: { | ||
| 718 | + row: params.row | ||
| 719 | + } | ||
| 720 | + }) | ||
| 457 | } | 721 | } |
| 458 | }, | 722 | }, |
| 459 | { | 723 | { |
| 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 | 724 | + title: 'Name', |
| 725 | + key: 'name' | ||
| 494 | }, | 726 | }, |
| 495 | { | 727 | { |
| 496 | - "title": "次日留存", | ||
| 497 | - "key": "tomorrow", | ||
| 498 | - "width": 150, | ||
| 499 | - "sortable": true | 728 | + title: 'Age', |
| 729 | + key: 'age', | ||
| 730 | + fixed: 'right' | ||
| 500 | }, | 731 | }, |
| 501 | { | 732 | { |
| 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 | 733 | + title: 'Address', |
| 734 | + key: 'address', | ||
| 735 | + fixed: 'right' | ||
| 518 | } | 736 | } |
| 519 | ], | 737 | ], |
| 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 | - }, | 738 | + data9: [ |
| 596 | { | 739 | { |
| 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 | 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' | ||
| 610 | }, | 749 | }, |
| 611 | { | 750 | { |
| 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 | 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' | ||
| 625 | }, | 760 | }, |
| 626 | { | 761 | { |
| 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 | 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' | ||
| 640 | }, | 771 | }, |
| 641 | { | 772 | { |
| 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 | 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' | ||
| 670 | } | 782 | } |
| 671 | ] | 783 | ] |
| 672 | } | 784 | } |
| 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 | } | 785 | } |
| 699 | } | 786 | } |
| 700 | </script> | 787 | </script> |
src/components/table/table-body.vue
| @@ -28,7 +28,7 @@ | @@ -28,7 +28,7 @@ | ||
| 28 | ></Cell> | 28 | ></Cell> |
| 29 | </td> | 29 | </td> |
| 30 | </table-tr> | 30 | </table-tr> |
| 31 | - <tr v-if="rowExpanded(row._index)"> | 31 | + <tr v-if="rowExpanded(row._index)" :class="{[prefixCls + '-expanded-hidden']: fixed}"> |
| 32 | <td :colspan="columns.length" :class="prefixCls + '-expanded-cell'"> | 32 | <td :colspan="columns.length" :class="prefixCls + '-expanded-cell'"> |
| 33 | <Expand :key="row._rowKey" :row="row" :render="expandRender" :index="row._index"></Expand> | 33 | <Expand :key="row._rowKey" :row="row" :render="expandRender" :index="row._index"></Expand> |
| 34 | </td> | 34 | </td> |