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


Posted in Vue.js onApril 26, 2022

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

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

这是表头数据

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

这是表体数据

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

最终循环出来的结果

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

最后的合计使用的是el-table的原始合计功能,这个数据循环出来的时候在nos的最后一行也进行了总和,但是表格中是不希望有这样的数据出现的,所以在这里我有加了一个判断

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

当他的index为0的时候让他的总和为空。

el-table动态循环展示表头和数据

项目场景

展示学生考试的成绩,只有学号和姓名是固定的,后面的科目并不是固定的展示所有科目,是根据接口返回的有成绩的数据进行渲染的,具体见下图:

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

问题描述

接口返回的数据结构如下:后面的科目要进行循环展示,可以选定list的第一项作为头部循环出表格的头部,分数再根据各自的row进行获取

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

代码如下:

<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;

Tags in this post...

Vue.js 相关文章推荐
如何使用 vue-cli 创建模板项目
Nov 19 Vue.js
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 Vue.js
Vue实现随机验证码功能
Dec 29 Vue.js
详解Vue2的diff算法
Jan 06 Vue.js
vue3.0 自适应不同分辨率电脑的操作
Feb 06 Vue.js
vue路由实现登录拦截
Mar 24 Vue.js
详解Vue的sync修饰符
May 15 Vue.js
Vue自定义铃声提示音组件的实现
Jan 22 Vue.js
教你部署vue项目到docker
Apr 05 Vue.js
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 Vue.js
vue实现登陆页面开发实践
May 30 Vue.js
vue css 相对路径导入问题级踩坑记录
Jun 05 Vue.js
vue 把二维或多维数组转一维数组
Apr 24 #Vue.js
Vue OpenLayer 为地图绘制风场效果
Apr 24 #Vue.js
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
vue @click.native 绑定原生点击事件
Apr 22 #Vue.js
vue实现省市区联动 element-china-area-data插件
vue修饰符.capture和.self的区别
Apr 22 #Vue.js
vue 自定义组件添加原生事件
Apr 21 #Vue.js
You might like
黑夜路人出的几道php笔试题
2009/08/04 PHP
基于php 随机数的深入理解
2013/06/05 PHP
PHP中file_get_contents高?用法实例
2014/09/24 PHP
PHP实现的下载远程图片自定义函数分享
2015/01/28 PHP
php抽象类和接口知识点整理总结
2019/08/02 PHP
php7 参数、整形及字符串处理机制修改实例分析
2020/05/25 PHP
Js控制弹窗实现在任意分辨率下居中显示
2013/08/01 Javascript
JavaScript分页功能的实现方法
2015/04/25 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
2015/08/21 Javascript
IE下JS保存图片的简单实例
2016/07/15 Javascript
在vue中使用Autoprefixed的方法
2018/07/27 Javascript
vue实现简单的星级评分组件源码
2018/11/16 Javascript
关于JSON解析的实现过程解析
2019/10/08 Javascript
一起深入理解js中的事件对象
2021/02/06 Javascript
[07:06]2018DOTA2国际邀请赛寻真——卫冕冠军Team Liquid
2018/08/10 DOTA
Python解析xml中dom元素的方法
2015/03/12 Python
python3.4用循环往mysql5.7中写数据并输出的实现方法
2017/06/20 Python
python记录程序运行时间的三种方法
2017/07/14 Python
Python实现XML文件解析的示例代码
2018/02/05 Python
Python cookbook(数据结构与算法)将序列分解为单独变量的方法
2018/02/13 Python
shell命令行,一键创建 python 模板文件脚本方法
2018/03/20 Python
解决python给列表里添加字典时被最后一个覆盖的问题
2019/01/21 Python
Python @property使用方法解析
2019/09/17 Python
pandas-resample按时间聚合实例
2019/12/27 Python
python爬虫爬取监控教务系统的思路详解
2020/01/08 Python
python字符串替换re.sub()实例解析
2020/02/09 Python
python爬虫scrapy基本使用超详细教程
2021/02/20 Python
介绍一下Java中标识符的命名规则
2014/02/03 面试题
酒店司机岗位职责
2013/12/14 职场文书
公务员综合考察材料
2014/02/01 职场文书
军训 自我鉴定
2014/02/03 职场文书
社区活动总结报告
2014/05/05 职场文书
工商行政管理专业求职书
2014/05/23 职场文书
2014年全国爱牙日宣传活动方案
2014/09/21 职场文书
社区个人对照检查材料(群众路线)
2014/09/26 职场文书
Nginx配置80端口访问8080及项目名地址方法解析
2021/03/31 Servers