vue el-table,vue el-table-column

　　本文主要介绍vue如何使用el-table遍历循环头和表体数据，有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。

使用el-table遍历循环表头和表体数据

　　最终合计使用el-table原来的合计函数。这个数据在流传的时候，也是在nos的最后一行求和，但是这个数据预计不会出现在表中，所以我在这里加了一个判断。

　　当他的指数为0时，让他的总和为空。

　　显示学生的考试成绩，只有他们的学号和姓名是固定的，后面的科目没有固定显示所有科目，而是根据接口返回的成绩数据进行渲染。详情见下图：

　　接口返回的数据结构如下：下面的科目要循环显示，可以选择列表中的第一项作为表头循环出表头，根据各自所在的行得出分数。

　　代码如下：

　　El-table:data= table data . table list style= width:100% class= main-table stripe

　　El-table-column type= index label=序列号 align= center width= 50 /El-table-column

　　El-table-column prop= student num label=准考证号 align=center/el-table-column

　　El-table-column prop=学生姓名 label=姓名 align=居中/el-table-column

　　El-表格-列

　　标题列表中的v-for=(项目，索引

　　:key=index

　　:label=item.subjectName

　　align=居中

　　显示溢出工具提示

　　模板slot-scope= scope“{ scope . row . score volist[index]”。分数} }/模板

　　/El-表格-列

　　/el-table

　　//请求接口后获取数据

　　this.headerList=data.list[0]。scoreVOList

　　解决问题~ ~以上是我的亲身经历。希望能给大家一个参考，多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。