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},