vue 竖型表格

效果图

代码

// 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 #ccc;
}
.black_title{
  background-color: #fff2cc;
}

.bottom_border{
  background-color: #bdd7ee;
  border: 1px solid #000;
}