vue如何使用el-table遍历循环表头和表体数据
更新时间：2022年04月26日 14:33:14 作者：jasmine0178
这篇文章主要介绍了vue如何使用el-table遍历循环表头和表体数据，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
使用el-table遍历循环表头和表体数据
这是表头数据
这是表体数据
最终循环出来的结果
最后的合计使用的是el-table的原始合计功能，这个数据循环出来的时候在nos的最后一行也进行了总和，但是表格中是不希望有这样的数据出现的，所以在这里我有加了一个判断
当他的index为0的时候让他的总和为空。
el-table动态循环展示表头和数据
项目场景
展示学生考试的成绩，只有学号和姓名是固定的，后面的科目并不是固定的展示所有科目，是根据接口返回的有成绩的数据进行渲染的，具体见下图：
问题描述
接口返回的数据结构如下：后面的科目要进行循环展示，可以选定list的第一项作为头部循环出表格的头部，分数再根据各自的row进行获取
代码如下：
<el-table :data="tableData.tableList" style="width: 100%" class="main-table" stripe>
<el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
<el-table-column prop="studentNum" label="准考证号" align="center"></el-table-column>
<el-table-column prop="studentName" label="姓名" align="center"></el-table-column>
<el-table-column
v-for="(item,index) in headerList"
:key="index"
:label="item.subjectName"
align="center"
show-overflow-tooltip
>
<template slot-scope="scope">{{ scope.row.scoreVOList[index].score }}</template>
</el-table-column>
</el-table>
//请求接口后获取data
this.headerList = data.list[0].scoreVOList;
问题解决~~以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue3中实现响应式数据的方法是就是使用ref和reactive,所谓响应式就是界面和数据同步,能实现实时更新,下面这篇文章主要给大家介绍了关于Vue3中ref和reactive的相关资料,需要的朋友可以参考下2023-04-04
这篇文章主要介绍了vue使用自定义的icon图标的方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-05-05
这篇文章主要为大家详细介绍了vue3.0翻牌数字组件使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了详解基于vue-cli3快速发布一个fullpage组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
在现代前端开发中,组件的重用性和异步加载是提升用户体验和优化性能的关键因素,在Vue 3中,创建异步组件变得更为便利,本文将探讨如何在Vue 3中使用setup语法糖来创建异步组件,感兴趣的小伙伴跟着小编一起来看看吧2024-09-09
这篇文章主要介绍了使用Vue逐步实现Watch属性详解，watch对象中的value分别支持函数、数组、字符串、对象，较为常用的是函数的方式，当想要观察一个对象以及对象中的每一个属性的变化时，便会用到对象的方式2022-08-08
这篇文章主要介绍了vue利用axios来完成数据的交互,本文通过实例代码给大家讲解数据交互方法及安装方法,需要的朋友可以参考下2018-03-03
vite项目的根目录中的env.d.ts类型声明文件里要写什么
这篇文章主要介绍了vite项目的根目录中的env.d.ts类型声明文件里要写什么,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
Vue封装一个TodoList的案例与浏览器本地缓存的应用实现
这篇文章主要介绍了Vue封装一个TodoList的案例与浏览器本地缓存的应用实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
这篇文章主要介绍了echarts3如何清空上一次加载的series数据，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
最新评论