如何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的mixin策略
Nov 19 Vue.js
Vue与React的区别和优势对比
Dec 18 Vue.js
vue 实现基础组件的自动化全局注册
Dec 25 Vue.js
Vue中强制组件重新渲染的正确方法
Jan 03 Vue.js
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 Vue.js
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 Vue.js
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
Vue中避免滥用this去读取data中数据
Mar 02 Vue.js
Vue全局事件总线你了解吗
Feb 24 Vue.js
vue如何使用模拟的json数据查看效果
Mar 31 Vue.js
三种方式清除vue路由跳转router-link的历史记录
Apr 10 Vue.js
vue组件vue-esign实现电子签名
Apr 21 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实现获取客户端IP并获取IP信息
2015/03/17 PHP
php实现兼容2038年后Unix时间戳转换函数
2015/03/18 PHP
php中JSON的使用方法
2015/04/30 PHP
php使用MySQL保存session会话的方法
2015/06/18 PHP
Laravel如何同时连接多个数据库详解
2019/08/13 PHP
php图像生成函数之间的区别分析
2012/12/06 Javascript
JQuery AJAX 中文乱码问题解决
2013/06/05 Javascript
Javascript中实现trim()函数的两种方法
2015/02/04 Javascript
JS使用正则表达式除去字符串中重复字符的方法
2015/11/05 Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
2015/12/31 Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
2016/01/28 Javascript
JQuery validate插件验证用户注册信息
2016/05/11 Javascript
JavaScript排序算法动画演示效果的实现方法
2016/10/18 Javascript
详解Vue2.0之去掉组件click事件的native修饰
2017/04/20 Javascript
详解webpack2+React 实例demo
2017/09/11 Javascript
深入浅析JavaScript中的RegExp对象
2017/09/18 Javascript
从零开始搭建一个react项目开发
2018/02/09 Javascript
vue项目部署到nginx/tomcat服务器的实现
2019/08/26 Javascript
Layui实现数据表格默认全部显示(不要分页)
2019/10/26 Javascript
javascript实现点击按钮切换轮播图功能
2020/09/23 Javascript
[44:50]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 TNC vs VG
2018/04/02 DOTA
Python 2.7.x 和 3.x 版本的重要区别小结
2014/11/28 Python
python实现二分查找算法
2017/09/21 Python
python判断完全平方数的方法
2018/11/13 Python
详解Python3 pandas.merge用法
2019/09/05 Python
Python二元算术运算常用方法解析
2020/09/15 Python
用sleep间隔进行python反爬虫的实例讲解
2020/11/30 Python
matplotlib常见函数之plt.rcParams、matshow的使用(坐标轴设置)
2021/01/05 Python
Osklen官方在线商店:巴西服装品牌
2019/04/25 全球购物
机械制造专业毕业生求职信
2014/03/02 职场文书
个人公开承诺书
2014/03/28 职场文书
先进事迹报告会主持词
2014/04/02 职场文书
2014教师研修学习体会
2014/07/08 职场文书
授权委托书(完整版)
2014/09/10 职场文书
2014学习十八届四中全会精神思想汇报范文
2014/10/23 职场文书
适合青年人白手起家的创业项目分享
2019/08/16 职场文书