如何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中通过render函数给子组件设置ref操作
Nov 17 Vue.js
在vue中动态修改css其中一个属性值操作
Dec 07 Vue.js
详解Vue的异步更新实现原理
Dec 22 Vue.js
Vue实现省市区三级联动
Dec 27 Vue.js
Vue仿百度搜索功能
Dec 28 Vue.js
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 Vue.js
vue2实现provide inject传递响应式
May 21 Vue.js
vite+vue3.0+ts+element-plus快速搭建项目的实现
Jun 24 Vue.js
简单聊聊Vue中的计算属性和属性侦听
Oct 05 Vue.js
vue整合百度地图显示指定地点信息
Apr 06 Vue.js
Vue ECharts实现机舱座位选择展示功能
May 15 Vue.js
vue实现登陆页面开发实践
May 30 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 ignore_user_abort与register_shutdown_function 使用方法
2009/06/14 PHP
如何使用PHP实现javascript的escape和unescape函数
2013/06/29 PHP
PHP URL参数获取方式的四种例子
2014/02/28 PHP
php环境无法上传文件的解决方法
2014/04/30 PHP
php_screw安装使用教程(另一个PHP代码加密实现)
2014/05/29 PHP
php实现把url转换迅雷thunder资源下载地址的方法
2014/11/07 PHP
一个经典的PHP文件上传类分享
2014/11/18 PHP
实现php删除链表中重复的结点
2018/09/27 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
javascript 类方法定义还是有点区别
2009/04/15 Javascript
javascript浏览器兼容教程之事件处理
2014/06/09 Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
2014/10/17 Javascript
详谈nodejs异步编程
2014/12/04 NodeJs
JSON字符串和对象相互转换实例分析
2016/06/16 Javascript
connection reset by peer问题总结及解决方案
2016/10/21 Javascript
jQuery焦点图左右转换效果
2016/12/12 Javascript
js 数据存储和DOM编程
2017/02/09 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
2017/05/18 Javascript
用JS实现简单的登录验证功能
2017/07/28 Javascript
加快Vue项目的开发速度的方法
2018/12/12 Javascript
vue-element-admin 菜单标签失效的解决方式
2019/11/12 Javascript
Vue如何实现验证码输入交互
2020/12/07 Vue.js
[16:21]教你分分钟做大人:圣堂刺客
2014/12/03 DOTA
Python面向对象程序设计之私有属性及私有方法示例
2019/04/08 Python
PyQt5使用QTimer实现电子时钟
2019/07/29 Python
Django中的静态文件管理过程解析
2019/08/01 Python
Python自动化完成tb喵币任务的操作方法
2019/10/30 Python
Pytorch 图像变换函数集合小结
2021/02/01 Python
NBA欧洲商店(英国):NBA Europe Store UK
2018/07/27 全球购物
英国最大的纸工艺品商店:CraftStash
2018/12/01 全球购物
Perfume’s Club英国官网:购买香水和护肤品
2019/11/02 全球购物
巴西最大的巴士票务门户:Quero Passagem
2020/11/21 全球购物
家居饰品店创业计划书
2014/01/31 职场文书
八项规定整改方案
2014/10/01 职场文书
工作表扬信范文
2015/01/17 职场文书
Python获取指定日期是"星期几"的6种方法
2022/03/13 Python