效果如下图:
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},