chenhaodong / mew-iview

Commit 2993f4eec375236a6abc3ae2bb91ac28c09d1f49

Authored by 梁灏
1 parent af7d72b4

update Tab

Showing 2 changed files with 245 additions and 52 deletions   Show diff stats
Inline Side-by-side
examples/routers/table.vue
  Show/Hide comments   View file @2993f4e
... ... @@ -413,97 +413,289 @@
413 413 <!--</script>-->
414 414  
415 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 423 </template>
418 424 <script>
419 425 export default {
420 426 data () {
421 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 440 filters: [
435 441 {
436   - label: '大于25岁',
  442 + label: '大于4000',
437 443 value: 1
438 444 },
439 445 {
440   - label: '小于25岁',
  446 + label: '小于4000',
441 447 value: 2
442 448 }
443 449 ],
444 450 filterMultiple: false,
445 451 filterMethod (value, row) {
446 452 if (value === 1) {
447   - return row.age > 25;
  453 + return row.show > 4000;
448 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 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 700 </script>
  701 +
... ...
src/components/tabs/tabs.vue
  Show/Hide comments   View file @2993f4e
... ... @@ -155,6 +155,7 @@
155 155 updateBar () {
156 156 this.$nextTick(() => {
157 157 const index = this.navList.findIndex((nav) => nav.name === this.activeKey);
  158 + if (!this.$refs.nav) return; // 页面销毁时，这里会报错，为了解决 #2100
158 159 const prevTabs = this.$refs.nav.querySelectorAll(`.${prefixCls}-tab`);
159 160 const tab = prevTabs[index];
160 161 this.barWidth = tab ? parseFloat(tab.offsetWidth) : 0;
... ...