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 | 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 | 37 | </template> |
| 4 | 38 | <script> |
| 5 | 39 | export default { |
| 6 | 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 | 44 | </script> |
| 17 | 45 | \ No newline at end of file | ... | ... |
examples/routers/table.vue
| ... | ... | @@ -412,289 +412,376 @@ |
| 412 | 412 | <!--};--> |
| 413 | 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 | 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 | 704 | </template> |
| 424 | 705 | <script> |
| 706 | + import expandRow from '../components/tableExpand.vue'; | |
| 425 | 707 | export default { |
| 708 | + components: { expandRow }, | |
| 426 | 709 | data () { |
| 427 | 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 | 787 | </script> | ... | ... |
src/components/table/table-body.vue
| ... | ... | @@ -28,7 +28,7 @@ |
| 28 | 28 | ></Cell> |
| 29 | 29 | </td> |
| 30 | 30 | </table-tr> |
| 31 | - <tr v-if="rowExpanded(row._index)"> | |
| 31 | + <tr v-if="rowExpanded(row._index)" :class="{[prefixCls + '-expanded-hidden']: fixed}"> | |
| 32 | 32 | <td :colspan="columns.length" :class="prefixCls + '-expanded-cell'"> |
| 33 | 33 | <Expand :key="row._rowKey" :row="row" :render="expandRender" :index="row._index"></Expand> |
| 34 | 34 | </td> | ... | ... |