element框架的teble表格的数据展示由横向转纵向

<template><div class="m50"><el-table border style="margin-top: 50px;" :data="originData"><el-table-column label="题型" property="type" align="center"></el-table-column><el-table-column label="数量" property="num" align="center"></el-table-column><el-table-column label="均分" property="average" align="center"></el-table-column></el-table><!-- 转化后 --><el-table border style="margin-top: 50px;" :data="transData"><el-table-column v-for="(item, index) in transTitle" :label="item" :key="index" align="center"><template slot-scope="scope">{{scope.row[index]}}</template></el-table-column></el-table></div>
</template><script>export default {data() {return {// originData 为后端原始正常的数据, 此数据按正常表格展示 一行一行的数据// 保证数组里每一个对象中的字段顺序, 从上到下 一次对应显示表格中的从左到右originData: [{type: '选择题',num: '5题',average: '3分/题',},{type: '填空题',num: '5题',average: '3分/题',},{type: '选择题',num: '2题',average: '10分/题',}],originTitle: ['题型', '数量', '均分'], // originTitle 该标题为 正常显示的标题, 数组中的顺序就是上面数据源对象中的字段标题对应的顺序transTitle: ['', '学生1', '学生2', '学生3'], // transTitle 该标题为转化后的标题, 注意多一列,  因为原来的标题变成了竖着显示了, 所以多一列标题, 第一个为空即可transData: []}},created() {// 数组按矩阵思路, 变成转置矩阵let matrixData = this.originData.map((row) => {let arr = []for (let key in row) {arr.push(row[key])}return arr})console.log(matrixData)// 加入标题拼接最终的数据this.transData = matrixData[0].map((col, i) => {return [this.originTitle[i], ...matrixData.map((row) => {return row[i]})]})console.log(this.transData)}}
</script>
<style lang="scss" scoped>.m50 {margin: 50px;}
</style>

————————————————
版权声明：本文为CSDN博主「瞎转悠达」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_35859392/article/details/107399488

element框架的teble表格的数据展示由横向转纵向相关推荐

R tidyverse包结合excel进行数据框的横向、纵向及“键值对”格式转换
概念定义翻看网络上诸多有关进行数据库横纵向转换.或长宽转换的博文,发现大家对于"横向"与"纵向"的数据库的定义并不完全相同,经过学习与摸索,所幸达到了我原本期 ...
js实现表格动态数据展示在其他页面上
1.需求: 这个表格可以动态的添加,添加完毕后可以在另一个页面显示指定数据实现: <!DOCTYPE HTML> <html xmlns="http://www.w3.o ...
vue+element实现树状表格的增删改查；使用el-table树形数据与懒加载实现树状表格增删改查
以下代码可以直接复制使用一.情景: 列表是一个树状表格,可以无限添加下级,以及对列表的某一行进行增删改查(目前查没有写). 原博链接二.本篇是在原博主的代码基础上添加了部分功能. 功能1: 给树状 ...
JS-JSON-获取JSON对象中的数据展示到表格里
JS-JSON-获取JSON对象中的数据展示到表格里 1.要求点击按钮,将学生信息展示到表格里,并显示总记录条数. 2.实现思路创建JSON对象先创建一个JSON对象data,有总人数total ...
Springboot整合poi +vue实现导出导入Excle表格数据展示图形
工具: idea 数据库: mysql 框架:Springboot 准备工作: 1.导入主要依赖 (poi) <dependency><groupId>org.apache.p ...
Springboot+poi+实现导出导入Excle表格+Vue引入echarts数据展示
需求: 一. 数据库数据表导出Excle表格二. Excle数据导入数据库三. Vue引入Echarts数据展示工具: idea 数据库: mysql 框架:Springboot 准备工作: 1 ...
layui数据表格（一：基础篇，数据展示、分页组件、表格内嵌表单和图片）
表格展示神器之一:layui表格前言:在写后台管理系统中使用最多的就是表格数据展示了,使用表格组件能提高大量的开发效率,目前主流的数据表格组件有bootstrap table.layui table ...
在Element UI中表格根据数据动态变化显示表格的内容
需求对于Element UI里的表格,如果假设传入data的数据为数字(事实上其他的字母之类的也可)代表为表格的一些固定选项,而不是直接传入字符串,怎样实现替换.比如对于某个表格的选项,传入的数据用 ...
（MVP框架）登录+数据展示
MVP框架登录数据展示依赖 implementation 'com.google.code.gson:gson:2.8.5' implementation 'com.github.bumptec ...

element框架的teble表格的数据展示由横向转纵向

element框架的teble表格的数据展示由横向转纵向相关推荐

最新文章

热门文章