效果图
代码
// html
<div class
="" style
="width:100%;display:flex;" :summary-method
="getSummaries">
<div style
="width:15%;border:2px solid #000;">
<!--表头--
>
<table width
="100%">
<tr
><td class
="left_title bottom_border">方案
</td
></tr
>
<tr
><td class
="left_title bottom_border">月份
</td
></tr
>
<tr
><td class
="left_title bottom_border">1月
</td
></tr
>
<tr
><td class
="left_title bottom_border">2月
</td
></tr
>
<tr
><td class
="left_title bottom_border">3月
</td
></tr
>
<tr
><td class
="left_title bottom_border">4月
</td
></tr
>
<tr
><td class
="left_title bottom_border">5月
</td
></tr
>
<tr
><td class
="left_title bottom_border">6月
</td
></tr
>
<tr
><td class
="left_title bottom_border">7月
</td
></tr
>
<tr
><td class
="left_title bottom_border">8月
</td
></tr
>
<tr
><td class
="left_title bottom_border">9月
</td
></tr
>
<tr
><td class
="left_title bottom_border">10月
</td
></tr
>
<tr
><td class
="left_title bottom_border">11月
</td
></tr
>
<tr
><td class
="left_title bottom_border">12月
</td
></tr
>
<tr
><td class
="left_title bottom_border">合计
</td
></tr
>
</table
>
</div
>
<!--内容1--
>
<div v-for
="(item, index) in tableData" :key
="index" style
="border:2px solid #000;border-left:0px;">
<table width
="100%">
<tr
><td class
="black_title bottom_border">{{item.scheme
}}</td
></tr
>
<tr
><td class
="black_title">{{item.month
}}</td
></tr
>
<tr
><td class
="black_title">{{item.January
}}</td
></tr
>
<tr
><td class
="black_title">{{item.February
}}</td
></tr
>
<tr
><td class
="black_title">{{item.March
}}</td
></tr
>
<tr
><td class
="black_title">{{item.April
}}</td
></tr
>
<tr
><td class
="black_title">{{item.May
}}</td
></tr
>
<tr
><td class
="black_title">{{item.June
}}</td
></tr
>
<tr
><td class
="black_title">{{item.July
}}</td
></tr
>
<tr
><td class
="black_title">{{item.August
}}</td
></tr
>
<tr
><td class
="black_title">{{item.September
}}</td
></tr
>
<tr
><td class
="black_title">{{item.October
}}</td
></tr
>
<tr
><td class
="black_title">{{item.November
}}</td
></tr
>
<tr
><td class
="black_title">{{item.December
}}</td
></tr
>
<tr
><td class
="black_title">{{item.total
}}</td
></tr
>
</table
>
</div
>
<!--内容2 注意：这边需要加一个div 不然在同一DOM节点上:key的value有重复--
>
<div
>
<div v-for
="(item, index) in tableDatab" :key
="index" style
="border:2px solid #000;border-left:0px;">
<table width
="100%">
<tr
><td class
="black_title bottom_border">{{item.scheme
}}</td
></tr
>
<tr
><td class
="black_title">{{item.month
}}</td
></tr
>
<tr
><td class
="black_title">{{item.January
}}</td
></tr
>
<tr
><td class
="black_title">{{item.February
}}</td
></tr
>
<tr
><td class
="black_title">{{item.March
}}</td
></tr
>
<tr
><td class
="black_title">{{item.April
}}</td
></tr
>
<tr
><td class
="black_title">{{item.May
}}</td
></tr
>
<tr
><td class
="black_title">{{item.June
}}</td
></tr
>
<tr
><td class
="black_title">{{item.July
}}</td
></tr
>
<tr
><td class
="black_title">{{item.August
}}</td
></tr
>
<tr
><td class
="black_title">{{item.September
}}</td
></tr
>
<tr
><td class
="black_title">{{item.October
}}</td
></tr
>
<tr
><td class
="black_title">{{item.November
}}</td
></tr
>
<tr
><td class
="black_title">{{item.December
}}</td
></tr
>
<tr
><td class
="black_title">{{item.total
}}</td
></tr
>
</table
>
</div
>
</div
>
</div
>
//js
export default
{
data
() {
return {
tableData:
[
{
scheme:
"内容1",
month:
"1(kW.h)",
January:
"1",
February:
"0",
March:
"0",
April:
"1",
May:
"1",
June:
"1",
July:
"1",
August:
"1",
September:
"1",
October:
"1",
November:
"0",
December:
"1",
total:
"1",
},
{
scheme:
"1",
month:
"1(kW.h)",
January:
"1",
February:
"0",
March:
"0",
April:
"1",
May:
"1",
June:
"1",
July:
"1",
August:
"1",
September:
"1",
October:
"1",
November:
"0",
December:
"1",
total:
"1",
},
],
tableDatab:
[
{
scheme:
"内容2",
month:
"1(kW.h)",
January:
"1",
February:
"0",
March:
"0",
April:
"1",
May:
"1",
June:
"1",
July:
"1",
August:
"1",
September:
"1",
October:
"1",
November:
"0",
December:
"1",
total:
"1",
},
{
scheme:
"1",
month:
"1(kW.h)",
January:
"1",
February:
"0",
March:
"0",
April:
"1",
May:
"1",
June:
"1",
July:
"1",
August:
"1",
September:
"1",
October:
"1",
November:
"0",
December:
"1",
total:
"1",
},
}
}
}
// css
.black_title,.left_title
{
height: 40px
;
line-height: 40px
;
text-align: center
;
border: 1px solid
}
.black_title
{
background-color:
}
.bottom_border
{
background-color:
border: 1px solid
}
