效果图
html结构
表格数据对应渲染功能实现思路:其实看代码就能了解了,就很简单的用循环数组,然后把数组中的每一项对应放在一个位置就行了。这样循环几个,就有几列数据,后台传过来的数据就分成两个,一个就是第一列的科目,另外的就是后面的每个人的名字和他的成绩,只需要循环放在对应位置
<!-- 表格部分 -->
<div >
<div>
<van-notice-bar
scrollable
style="margin-bottom: 10px; margin-left: 15px; width: 90vw"
left-icon="volume-o"
text="空白(没有参加) 横杠 (没有这项考试)"
/>
</div>
<!-- 表格部分 -->
<div class="result_wrap">
<div>
<div class="result_box aaa">
<p class="result_title result_bottom">科目 | 学员</p>
<p
class="result_title result_bottom"
v-for="(item, index) in result_analysis.subjectList"
:key="index"
>
{{ item.testSubjectName }}
</p>
</div>
<div class="bbb">
<div
class="result_box"
v-for="(item, index) in result_analysis.list_result_new"
:key="index"
>
<p class="result_title result_bottom">{{ item.name }}</p>
<!-- <p class="result_title">{{item.resultScore}}</p> -->
<p class="result_title">{{ item.yintixiangshang }}</p>
<p class="result_title">{{ item.fuwocheng }}</p>
<p class="result_title">{{ item.yangwoqizuo }}</p>
<p class="result_title">{{ item.lidingtiaoyuan }}</p>
<p class="result_title">{{ item.wangfanpao }}</p>
<p class="result_title">{{ item.changpao1200 }}</p>
<p class="result_title">{{ item.changpao800 }}</p>
</div>
</div>
</div>
</div>
</div>
css部分
.result_wrap {
width: 100%;
white-space: nowrap;
overflow: auto;
margin-top: 20px;
}
.result_box {
display: inline-block;
width: 105px;
border: solid #ccc 1px;
}
.result_title {
height: 40px;
border-bottom: solid 1px #ccc;
margin: 0;
text-align: center;
line-height: 40px;
font-size: 14px;
}
.aaa{position: fixed;z-index: 100;background-color: #fff;}
.bbb{margin-left: 105px;}