div模擬表格單元格合並

效果如下圖：

html代碼如下：

<ul class="schedule-list">
   <li class="schedule-title">
      <div>影響因素</div>
      <div>實際得分</div>
      <div>賦分標准</div>
      <div>賦分值</div>
   </li>
   <li class="schedule-item" v-for="(item, index) in shipInfo.shipList" :key="index">
      <div class="influence-factor">{{item.influenceFactor}}</div>
      <div class="schedule-date">{{item.actualScore}}</div>

      <div v-if="item.influenceFactor === '船型'" class="structure-model-wrap">
          <div class="structure-model">{{item.structureModel}}</div>
          <div class="structure-model-right">
              <div v-for="(subItem, subIndex) in item.subList" :key="subIndex" class="schedule-content">
                 <div class="journey">{{subItem.scaleMark}}</div>
                 <div class="lecturer">{{subItem.scaleVal}}</div>
              </div>
          </div>
      </div>
      <div class="schedule-content-wrap" v-if="item.influenceFactor !== '船型'">
          <div class="schedule-content" v-for="(subItem, subIndex) in item.subList" :key="subIndex">
              <div class="journey">{{subItem.scaleMark}}</div>
              <div class="lecturer">{{subItem.scaleVal}}</div>
          </div>
      </div>
   </li>
   <li class="total-score">
      <div>本項得分小計</div>
      <div>{{shipInfo.totalScore}}</div>
   </li>
   <li class="total-weight">
      <div>權重得分(實際得分*20%)</div>
      <div>{{shipInfo.totalWeight}}</div>
   </li>
</ul>

data數據格式如下 1 data: {

 shipInfo: {  3  shipList: [{  4          influenceFactor: '船齡',  5          actualScore: 7,  6  subList: [{  7             scaleMark: '<=12年',  8             scaleVal: 30
 }, 10  { 11             scaleMark: '>12年', 12             scaleVal: 0
 } 14  ] 15  }, 16  { 17          influenceFactor: '船型', 18          actualScore: 8, 19          structureModel: '結構類型', 20  subList: [{ 21             scaleMark: '雙底雙殼', 22             scaleVal: 20
 }, 24  { 25             scaleMark: '雙底單殼', 26             scaleVal: 10
 }, 28  { 29             scaleMark: '單底單殼', 30             scaleVal: 0
 } 32  ] 33  }, 34  { 35          influenceFactor: '船檢', 36          actualScore: 4, 37  subList: [{ 38             scaleMark: 'CCS', 39             scaleVal: 20
 }, 41  { 42             scaleMark: 'ZC', 43             scaleVal: 10
 } 45  ] 46  }, 47  { 48          influenceFactor: '過去36個月發生責任事故情況', 49          actualScore: 5, 50  subList: [{ 51             scaleMark: '無事故', 52             scaleVal: 20
 }, 54  { 55             scaleMark: '發生過一次及以上責任事故', 56             scaleVal: 0
 } 58  ] 59  }, 60  { 61          influenceFactor: '重大風險船舶', 62          actualScore: '本項得分歸零', 63  subList: [{ 64             scaleMark: '船齡>26年', 65             scaleVal: '自動歸零'
 }, 67  { 68             scaleMark: '去過12個月內發生過一次及以上等級的責任事故', 69             scaleVal: '自動歸零'
 } 71  ] 72  }, 73  ], 74       totalScore: 95, 75       totalWeight: 30
 }, 77},