如何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 + el-form 实现的多层循环表单验证
Nov 25 Vue.js
vue表单验证之禁止input输入框输入空格
Dec 03 Vue.js
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
Dec 25 Vue.js
Vue 修改网站图标的方法
Dec 31 Vue.js
vue中使用echarts的示例
Jan 03 Vue.js
通过vue.extend实现消息提示弹框的方法记录
Jan 07 Vue.js
vue-cropper插件实现图片截取上传组件封装
May 27 Vue.js
vue中 this.$set的使用详解
Nov 17 Vue.js
详解Vue的列表渲染
Nov 20 Vue.js
Vue监视数据的原理详解
Feb 24 Vue.js
分享一个vue实现的记事本功能案例
Apr 11 Vue.js
vue.js 使用原生js实现轮播图
Apr 26 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下检测字符串是否是utf8编码的代码
2008/06/28 PHP
php 一维数组的循环遍历实现代码
2017/04/10 PHP
通过PHP设置BugFree获取邮箱通知
2019/04/25 PHP
默认让页面的第一个控件选中的javascript代码
2009/12/26 Javascript
JQuery实现简单时尚快捷的气泡提示插件
2012/12/20 Javascript
js 字符串转换成数字的三种方法
2013/03/23 Javascript
用C/C++来实现 Node.js 的模块(一)
2014/09/24 Javascript
node.js中的fs.link方法使用说明
2014/12/15 Javascript
jQuery实现给页面换肤的方法
2015/05/30 Javascript
jQuery实现仿百度帖吧头部固定导航效果
2015/08/07 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
2015/10/23 Javascript
原生js实现轮播图
2017/02/27 Javascript
Angularjs实现上传图片预览功能
2017/09/01 Javascript
Vue实现table上下移动功能示例
2019/02/21 Javascript
vue.js实现会动的简历(包含底部导航功能,编辑功能)
2019/04/08 Javascript
深入探索VueJS Scoped CSS 实现原理
2019/09/23 Javascript
详解vue中$nextTick和$forceUpdate的用法
2019/12/11 Javascript
Python用Bottle轻量级框架进行Web开发
2016/06/08 Python
今天 平安夜 Python 送你一顶圣诞帽 @微信官方
2017/12/25 Python
在PyCharm中三步完成PyPy解释器的配置的方法
2018/10/29 Python
python实现宿舍管理系统
2019/11/22 Python
python 中不同包 类 方法 之间的调用详解
2020/03/09 Python
PyQt5多线程防卡死和多窗口用法的实现
2020/09/15 Python
乌克兰鞋类购物网站:Eobuv.com.ua
2020/11/28 全球购物
怎样创建、运行java程序
2014/08/01 面试题
什么是事务?事务有哪些性质?
2012/03/11 面试题
爱情寄语大全
2014/04/09 职场文书
百日安全活动总结
2014/05/04 职场文书
小学校长竞聘演讲稿
2014/05/16 职场文书
篮球赛口号
2014/06/18 职场文书
公司委托书范本5篇
2014/09/20 职场文书
高中生国庆节演讲稿范文2014
2014/09/21 职场文书
十一国庆节“向国旗敬礼”主题班会活动方案
2014/09/27 职场文书
元宵节寄语大全
2015/02/27 职场文书
考勤制度通知
2015/04/25 职场文书
2016年六一文艺汇演开幕词
2016/03/04 职场文书