如何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 组件注册
Nov 20 Vue.js
ESLint 是如何检查 .vue 文件的
Nov 30 Vue.js
如何在Vue项目中添加接口监听遮罩
Jan 25 Vue.js
详解Vue的七种传值方式
Feb 08 Vue.js
vue-element-admin项目导入和导出的实现
May 21 Vue.js
SSM VUE Axios详解
Oct 05 Vue.js
Vue提供的三种调试方式你知道吗
Jan 18 Vue.js
vue3获取当前路由地址
Feb 18 Vue.js
Vue如何清空对象
Mar 03 Vue.js
vue2的 router在使用过程中遇到的一些问题
Apr 13 Vue.js
vue 把二维或多维数组转一维数组
Apr 24 Vue.js
vue里使用create, mounted调用方法
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排序算法之冒泡排序(Bubble Sort)实现方法详解
2018/04/20 PHP
jquery 插件 任意位置浮动固定层
2008/12/25 Javascript
javascript 窗口加载蒙板 内嵌网页内容
2010/11/19 Javascript
jQuery 事件的命名空间简单了解
2013/11/22 Javascript
浅析document.ready和window.onload的区别讲解
2013/12/18 Javascript
table对象中的insertRow与deleteRow使用示例
2014/01/26 Javascript
jQuery中:hidden选择器用法实例
2014/12/30 Javascript
全面解析Bootstrap布局组件应用
2016/02/22 Javascript
下雪了 javascript实现雪花飞舞
2020/08/02 Javascript
JS结合bootstrap实现基本的增删改查功能
2016/07/22 Javascript
jQuery中animate的几种用法与注意事项
2016/12/12 Javascript
Html5 js实现手风琴效果
2020/04/17 Javascript
微信小程序 图片宽度自适应的实现
2017/04/06 Javascript
nodejs 使用 js 模块的方法实例详解
2018/12/04 NodeJs
送你43道JS面试题(收藏)
2019/06/17 Javascript
使用微信SDK自定义分享的方法
2019/07/03 Javascript
Vue利用Blob下载原生二进制数组文件
2019/09/25 Javascript
基于小程序请求接口wx.request封装的类axios请求
2020/07/02 Javascript
基于Vue+Webpack拆分路由文件实现管理
2020/11/16 Javascript
Vue使用Element实现增删改查+打包的步骤
2020/11/25 Vue.js
使用python编写简单的小程序编译成exe跑在win10上
2018/01/15 Python
Python3随机漫步生成数据并绘制
2018/08/27 Python
Python使用Selenium爬取淘宝异步加载的数据方法
2018/12/17 Python
Python中sys模块功能与用法实例详解
2020/02/26 Python
简单了解pytest测试框架setup和tearDown
2020/04/14 Python
python退出循环的方法
2020/06/18 Python
python matlab库简单用法讲解
2020/12/31 Python
35款精致的 CSS3 和 HTML5 网页模板 推荐
2012/08/03 HTML / CSS
HTML5的一个显示电池状态的API简介
2015/06/18 HTML / CSS
Nike瑞典官方网站:Nike.com (SE)
2018/11/26 全球购物
CheapTickets香港机票预订网站:CheapTickets.hk
2019/06/26 全球购物
产品设计开发计划书
2014/05/07 职场文书
十佳党员事迹材料
2014/08/28 职场文书
后备干部推荐材料
2014/12/24 职场文书
《金色的草地》教学反思
2016/02/17 职场文书
Java死锁的排查
2022/05/11 Java/Android