自定义日历表格
作者：互联网
效果如下：
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 }
标签：formTable,dl,自定义,表格,211,日历,SummaryDate,2021,SummaryValue 来源： https://www.cnblogs.com/jspang/p/15710145.html