如何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 Elenent实现表格相同数据列合并
Nov 30 Vue.js
vue祖孙组件之间的数据传递案例
Dec 07 Vue.js
vue项目中openlayers绘制行政区划
Dec 24 Vue.js
vue导入.md文件的步骤(markdown转HTML)
Dec 31 Vue.js
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 Vue.js
Vue项目中如何封装axios(统一管理http请求)
May 02 Vue.js
vue实现同时设置多个倒计时
May 20 Vue.js
Vue CLI中模式与环境变量的深入详解
May 30 Vue.js
Vue组件更新数据v-model不生效的解决
Apr 02 Vue.js
教你部署vue项目到docker
Apr 05 Vue.js
vue的项目如何打包上线
Apr 13 Vue.js
vue3 自定义图片放大器效果的示例代码
Jul 23 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
解析linux下安装memcacheq(mcq)全过程笔记
2013/06/27 PHP
如何在HTML 中嵌入 PHP 代码
2015/05/13 PHP
Thinkphp5框架使用validate实现验证功能的方法
2019/08/27 PHP
手把手教你自己写一个js表单验证框架的方法
2010/09/14 Javascript
jquery表单验证使用插件formValidator
2012/11/10 Javascript
jquery和ajax的关系详细介绍
2013/11/29 Javascript
javascript设计模式之解释器模式详解
2014/06/05 Javascript
jQuery 实现自动填充邮箱功能(带下拉提示)
2014/10/14 Javascript
js解决movebox移动问题
2016/03/29 Javascript
js 动态生成json对象、时时更新json对象的方法
2016/12/02 Javascript
新闻上下滚动jquery 超简洁(必看篇)
2017/01/21 Javascript
Vue 过渡(动画)transition组件案例详解
2017/01/22 Javascript
JavaScript常用正则函数用法示例
2017/01/23 Javascript
vue2实现数据请求显示loading图
2017/11/28 Javascript
bootstrap table支持高度百分比的实例代码
2018/02/28 Javascript
Django+Vue跨域环境配置详解
2018/07/06 Javascript
详解VS Code使用之Vue工程配置format代码格式化
2019/03/20 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
2020/03/16 Javascript
vue+AI智能机器人回复功能实现
2020/07/16 Javascript
vscode中Vue别名路径提示的实现
2020/07/31 Javascript
vue data有值,但是页面{{}} 取不到值的解决
2020/11/09 Javascript
Python实现CET查分的方法
2015/03/10 Python
python集合类型用法分析
2015/04/08 Python
python安装twisted的问题解析
2018/08/21 Python
Python函数返回不定数量的值方法
2019/01/22 Python
Python基础学习之函数方法实例详解
2019/06/18 Python
12个Python程序员面试必备问题与答案(小结)
2019/06/24 Python
Python如何定义接口和抽象类
2020/07/28 Python
iframe在移动端的缩放的示例代码
2018/10/12 HTML / CSS
美国领先的户外服装与装备用品店:Moosejaw
2016/08/25 全球购物
餐饮部总监岗位职责范文
2014/02/13 职场文书
总经理的岗位职责
2014/02/23 职场文书
关于热爱祖国的演讲稿
2014/05/04 职场文书
九一八事变纪念日演讲稿
2014/09/14 职场文书
老兵退伍标语
2014/10/07 职场文书
努力学习保证书
2015/02/26 职场文书