element框架的teble表格的数据展示由横向转向竖向
时间:2020-07-16
本文章向大家介绍element框架的teble表格的数据展示由横向转向竖向,主要包括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>
原文地址:https://www.cnblogs.com/aidixie/p/13323812.html
- 常用的标准SQL 语句
- 更精准!英研究人员利用AI监测预防城市洪水
- 物联网平台的采用将成为2018年首要IT发展趋势
- python基础随笔
- Mysql+Keepalived双主热备高可用操作记录
- Mysql双主热备+LVS+Keepalived高可用操作记录
- 被曝大裁员!曲德君坚称万达网科没有倒下、目标决心不变
- Linux下smokeping网络监控环境部署记录
- Linux下的rsyslog系统日志梳理(用户操作记录审计)
- 数据结构之数组封装
- Centos下内网NDS主从环境部署记录
- 一搜解决,微信的这个功能厉害了!
- Saltstack自动化操作记录(2)-配置使用
- Saltstack自动化操作记录(1)-环境部署
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 通过 PHP 原生代码实现 HTTP 控制器
- Go 视图模板篇(一):模板引擎的定义、解析与执行
- Mycat分库分表全解析 Part 6 Mycat 全局序列号
- 通过 PHP 原生代码实现视图模板引擎的解析和渲染
- [MySQL故障处理]记一次innobackupex导致的从库无法同步的问题
- [Oracle 故障处理]记一次DG数据文件无法创建的问题
- mysqldump命令详解 4-按条件备份表数据
- mysqldump命令详解 5-导出事件,函数和存储过程
- [Oracle集群软件全解析]Oracle Cluster Registry Utility 参考
- mysqldump命令详解 Part 8 其他的一些的参数的介绍
- mysqldump命令详解 Part 6- --master-data参数的使用
- 腾讯云语音识别.net-sdk使用笔记0818
- mysqldump命令详解 Part 9 mysqldump命令总结
- [MySQL学习笔记] 3.mysqldump命令详解 Part 2 -备份全库
- [MySQL学习笔记]1. MySQL测试数据的构造