div模拟表格单元格合并

效果如下图：

html代码如下：

 1 <ul class="schedule-list">
 2    <li class="schedule-title">
 3       <div>影响因素</div>
 4       <div>实际得分</div>
 5       <div>赋分标准</div>
 6       <div>赋分值</div>
 7    </li>
 8    <li class="schedule-item" v-for="(item, index) in shipInfo.shipList" :key="index">
 9       <div class="influence-factor">{{item.influenceFactor}}</div>
10       <div class="schedule-date">{{item.actualScore}}</div>
11
12       <div v-if="item.influenceFactor === '船型'" class="structure-model-wrap">
13           <div class="structure-model">{{item.structureModel}}</div>
14           <div class="structure-model-right">
15               <div v-for="(subItem, subIndex) in item.subList" :key="subIndex" class="schedule-content">
16                  <div class="journey">{{subItem.scaleMark}}</div>
17                  <div class="lecturer">{{subItem.scaleVal}}</div>
18               </div>
19           </div>
20       </div>
21       <div class="schedule-content-wrap" v-if="item.influenceFactor !== '船型'">
22           <div class="schedule-content" v-for="(subItem, subIndex) in item.subList" :key="subIndex">
23               <div class="journey">{{subItem.scaleMark}}</div>
24               <div class="lecturer">{{subItem.scaleVal}}</div>
25           </div>
26       </div>
27    </li>
28    <li class="total-score">
29       <div>本项得分小计</div>
30       <div>{{shipInfo.totalScore}}</div>
31    </li>
32    <li class="total-weight">
33       <div>权重得分(实际得分*20%)</div>
34       <div>{{shipInfo.totalWeight}}</div>
35    </li>
36 </ul>

data数据格式如下 1 data: {

 2    shipInfo: {
 3       shipList: [{
 4          influenceFactor: '船龄',
 5          actualScore: 7,
 6          subList: [{
 7             scaleMark: '<=12年',
 8             scaleVal: 30
 9          },
10          {
11             scaleMark: '>12年',
12             scaleVal: 0
13          }
14          ]
15       },
16       {
17          influenceFactor: '船型',
18          actualScore: 8,
19          structureModel: '结构类型',
20          subList: [{
21             scaleMark: '双底双壳',
22             scaleVal: 20
23          },
24          {
25             scaleMark: '双底单壳',
26             scaleVal: 10
27          },
28          {
29             scaleMark: '单底单壳',
30             scaleVal: 0
31          }
32          ]
33       },
34       {
35          influenceFactor: '船检',
36          actualScore: 4,
37          subList: [{
38             scaleMark: 'CCS',
39             scaleVal: 20
40          },
41          {
42             scaleMark: 'ZC',
43             scaleVal: 10
44          }
45          ]
46       },
47       {
48          influenceFactor: '过去36个月发生责任事故情况',
49          actualScore: 5,
50          subList: [{
51             scaleMark: '无事故',
52             scaleVal: 20
53          },
54          {
55             scaleMark: '发生过一次及以上责任事故',
56             scaleVal: 0
57          }
58          ]
59       },
60       {
61          influenceFactor: '重大风险船舶',
62          actualScore: '本项得分归零',
63          subList: [{
64             scaleMark: '船龄>26年',
65             scaleVal: '自动归零'
66          },
67          {
68             scaleMark: '去过12个月内发生过一次及以上等级的责任事故',
69             scaleVal: '自动归零'
70          }
71          ]
72       },
73       ],
74       totalScore: 95,
75       totalWeight: 30
76   },
77},