自定義日曆表格
阿新 • • 發佈：2021-12-20
效果如下：
1 <el-row> 2 <el-col :span="24"> 3 <div class="formTable" v-for="(item, index) in formTable" :key="index"> 4 <dl> 5 <dt>{{item.UnitName}}</dt> 6 <dd> 7 <div style="max-height: 174px; overflow-y: auto;" :class="item.lastSummaryDateList.length == 0 ? 'borderBottom' : ''"> 8 <dl v-for="(item1, index1) in item.topSummaryDateList" :key="index1"> 9 <dt>{{item1.SummaryDate}}</dt> 10 <dd>{{item1.SummaryValue}}</dd> 11 </dl> 12 <dl v-for="(item2, index2) in item.lastSummaryDateList" > 13 <dt>{{item2.SummaryDate}}</dt> 14 <dd class="borderBottom">{{item2.SummaryValue}}</dd> 15 </dl> 16 </div> 17 </dd> 18 </dl> 19 </div> 20 <p style="text-align: center; color: #ccc;font-size: 12px;">已經到底部了，不要再滑了</p> 21 </el-col> 22 </el-row>
1 data() { 2 return { 3 formTable:[ 4 525 { 526 UnitName:"電/KWH", 527 SummaryDateList:[ 528 { 529 SummaryDate:"2021/2/1", 530 SummaryValue:"211" 531 }, 532 { 533 SummaryDate:"2021/2/2", 534 SummaryValue:"211" 535 }, 536 { 537 SummaryDate:"2021/2/3", 538 SummaryValue:"211" 539 }, 540 { 541 SummaryDate:"2021/2/4", 542 SummaryValue:"211" 543 }, 544 { 545 SummaryDate:"2021/2/5", 546 SummaryValue:"211" 547 }, 548 { 549 SummaryDate:"2021/2/6", 550 SummaryValue:"211" 551 }, 552 { 553 SummaryDate:"2021/2/7", 554 SummaryValue:"211" 555 }, 556 { 557 SummaryDate:"2021/2/8", 558 SummaryValue:"211" 559 }, 560 { 561 SummaryDate:"2021/2/9", 562 SummaryValue:"211" 563 }, 564 { 565 SummaryDate:"2021/2/10", 566 SummaryValue:"211" 567 }, 568 { 569 SummaryDate:"2021/2/11", 570 SummaryValue:"211" 571 }, 572 { 573 SummaryDate:"2021/2/12", 574 SummaryValue:"211" 575 }, 576 { 577 SummaryDate:"2021/2/13", 578 SummaryValue:"211" 579 }, 580 { 581 SummaryDate:"2021/2/14", 582 SummaryValue:"211" 583 }, 584 { 585 SummaryDate:"2021/2/15", 586 SummaryValue:"211" 587 }, 588 { 589 SummaryDate:"2021/2/16", 590 SummaryValue:"211" 591 }, 592 { 593 SummaryDate:"2021/2/17", 594 SummaryValue:"211" 595 }, 596 { 597 SummaryDate:"2021/2/18", 598 SummaryValue:"211" 599 }, 600 { 601 SummaryDate:"2021/2/19", 602 SummaryValue:"211" 603 }, 604 { 605 SummaryDate:"2021/2/20", 606 SummaryValue:"211" 607 }, 608 { 609 SummaryDate:"2021/2/21", 610 SummaryValue:"211" 611 }, 612 { 613 SummaryDate:"2021/2/22", 614 SummaryValue:"211" 615 }, 616 { 617 SummaryDate:"2021/2/23", 618 SummaryValue:"211" 619 }, 620 { 621 SummaryDate:"2021/2/24", 622 SummaryValue:"211" 623 }, 624 { 625 SummaryDate:"2021/2/25", 626 SummaryValue:"211" 627 }, 628 { 629 SummaryDate:"2021/2/26", 630 SummaryValue:"211" 631 }, 632 { 633 SummaryDate:"2021/2/27", 634 SummaryValue:"211" 635 }, 636 { 637 SummaryDate:"2021/2/28", 638 SummaryValue:"211" 639 }, 640 { 641 SummaryDate:"2021/2/29", 642 SummaryValue:"211" 643 }, 644 { 645 SummaryDate:"2021/2/30", 646 SummaryValue:"211" 647 }, 648 { 649 SummaryDate:"2021/2/31", 650 SummaryValue:"211" 651 }, 652 653 654 ], 655 656 }, 657 ], 658 } 659 }
1 // 處理資料 2 FormTable(){ 3 this.formTable = this.formTable.map((row,index) => { 4 let rowNum = row.SummaryDateList.length%10 5 console.log("row:",row.SummaryDateList.length,JSON.parse(JSON.stringify(row))); 6 row.topSummaryDateList = row.SummaryDateList.splice(0,(row.SummaryDateList.length - rowNum)) 7 row.lastSummaryDateList = row.SummaryDateList.slice(-rowNum) 8 return row 9 10 }) 11 console.log("this.formTable:",this.borderBottomShow,JSON.parse(JSON.stringify(this.formTable))); 12 },
1 /* 表格模式 */ 2 .formTable{ 3 width: 100%; 4 border: 1px solid #999; 5 border-bottom: none; 6 margin-bottom: 20px; 7 transition: .5s; 8 -webkit-transition: .5s; 9 -moz-transition: .5s; 10 -o-transition: .5s; 11 -ms-transition: .5s; 12 } 13 .formTable:last-of-type{ 14 margin-bottom: 10px; 15 } 16 .formTable:hover{ 17 box-shadow: 0px 0px 10px 3px #ddd; 18 } 19 .formTable > dl{ 20 overflow: hidden; 21 width: 100%; 22 display: flex; 23 } 24 .formTable > dl > dt{ 25 width: 10%; 26 border-right: 1px solid #999; 27 border-bottom: 1px solid #999; 28 display: flex; 29 justify-content: center; 30 align-items: center; 31 } 32 33 .formTable > dl > dd{ 34 width: 90%; 35 36 /* border-right: 1px solid #ddd; */ 37 38 } 39 .formTable > dl > dd >div{ 40 overflow: hidden; 41 width: 100%; 42 /* border-right: 1px solid #999; */ 43 /* display: flex; */ 44 border-bottom: 1px solid #999; 45 display: flex; 46 align-items: center; 47 justify-content: flex-start; 48 flex-wrap: wrap; 49 } 50 .formTable > dl > dd >div >dl{ 51 overflow: hidden; 52 width: 10%; 53 border-right: 1px solid #999; 54 /* display: flex; */ 55 } 56 .formTable > dl > dd >div >dl:nth-child(10n){ 57 border-right: none; 58 } 59 .formTable > dl > dd >div >dl > dt{ 60 padding: 5px; 61 width: 100%; 62 display: flex; 63 justify-content: center; 64 align-items: center; 65 border-bottom: 1px solid #ddd; 66 font-weight: bold; 67 } 68 69 .formTable > dl > dd >div >dl > dd{ 70 padding: 5px; 71 width: 100%; 72 display: flex; 73 justify-content: center; 74 align-items: center; 75 border-bottom: 1px solid #999; 76 } 77 .borderBottom{ 78 border-bottom: none!important; 79 }