el-table实现转置表格

vue版本:vue2.6.10
elementui版本:2.15.14
实现效果:el-table实现行列互换

代码:

<template><div class="app-container"><span>原始数据</span><el-table:data="datas"border><template v-for="(item, index) in columns"><el-table-column:key="index":prop="item.prop"align="center":label="item.label"/></template></el-table><span>行转列的数据</span><el-table:data="tableData"border><el-table-column v-for="item in columnsData" :key="item.prop" :label="item.label" :prop="item.prop"><template slot-scope="scope">{{scope.row[item.prop]}}</template></el-table-column></el-table></div>
</template><script>
export default {name: 'TestTable',data() {return {datas: [{"user_name": "小红","user_sex": "女","user_age": 18,"grade": 100},{"user_name": "小明","user_sex": "男","user_age": 20,"grade": 97},{"user_name": "小紫","user_sex": "女","user_age": 21,"grade": 99},{"user_name": "小李","user_sex": "男","user_age": 19,"grade": 98}],columns: [{ "label": "名称", "prop": "user_name" },{ "label": "性别", "prop": "user_sex" },{ "label": "年龄", "prop": "user_age" },{ "label": "成绩", "prop": "grade" },],tableData: [],columnsData: []}},created() {this.init()},methods: {init() {console.log('test')const _this = thisconst columnObj = {} //创建标题数组中第一个对象columnObj.label = '名称' //第一个标题名称columnObj.prop = 'title' //第一个标题名称对应的字段_this.columnsData.push(columnObj) //第一个标题 放入标题数组中_this.tableData.push({ 'title': '性别' }) //表格数据中第一个对象数据 属性名叫 title 与上面的第一个prop设置一样_this.tableData.push({ 'title': '年龄' }) //表格数据中第二个对象数据 属性名叫 title 与上面的第一个prop设置一样_this.tableData.push({ 'title': '成绩' }) //表格数据中第三个对象数据 属性名叫 title 与上面的第一个prop设置一样var props = 'prop' //自定义字段名称_this.datas.forEach(function(item, index) {const columnObj = {}columnObj.label = item.user_name // 每一列的标题的名称columnObj.prop = props + index //自定义每一列标题字段名称_this.columnsData.push(columnObj)_this.$set(_this.tableData[0], columnObj.prop, item.user_sex) //表格数据中第一个数组对象 往里面添加自定义的属性_this.$set(_this.tableData[1], columnObj.prop, item['user_age']) //表格数据中第二个数组对象 往里面添加自定义的属性_this.$set(_this.tableData[2], columnObj.prop, item.grade) //表格数据中第三个数组对象 往里面添加自定义的属性})console.log(_this.columnsData)console.log(_this.tableData)}}
}
</script>

界面展示效果:
效果图

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/708842.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JAVA的方法

学习过C语言&#xff0c;我们可以知道&#xff0c;C语言是由各种各样的函数构成的&#xff0c;程序的入口是主函数&#xff0c;程序结束也是从主函数的最后一行代码结束的&#xff08;默认主函数中间没有return&#xff09;。JAVA是在C上编写的&#xff0c;而C是在C语言之上编写…

Groovy(第四节) Groovy 之循环

目录 循环 深入方法 Groovy 中的范围 设置范围 默认参数值

orm工具saveOrUpdate()操作设计思路

背景 当我们使用数据库向表中插入数据的时候&#xff0c;经常遇到这样的情况&#xff1a; 判断数据是否存在&#xff1b;如果不存在&#xff0c;则插入&#xff1b;如果存在&#xff0c;则更新。 如何设计saveOrUpdate&#xff08;&#xff09; 当我们手写一个orm工具库的时…

自动化信息抽取:提升物资仓库管理效率的实践案例

一、引言 在当今快节奏的供应链管理中&#xff0c;物资仓库的信息抽取和处理是确保物流效率的关键环节。我曾参与的一个项目&#xff0c;正是针对这一需求而设计。该项目的核心目标是优化收货与入库流程&#xff0c;通过先进的信息抽取技术&#xff0c;我们能够自动接收并处理来…

MYSQL--JDBC*

一.介绍: 1.JDBC是一种用于执行SQL于语句的JAVA API,JDBC是一种使用JAVA访问数据库的执行规范标准,能够为不同的数据库提供统一的访问!由一组使用JAVA语言编写的接口以及类组成的 2.JDBC核心的类以及相关的接口主要有: DriverManager 注册驱动 Connection 使用…

代码随想录刷题笔记-Day25

1. 分割回文串 131. 分割回文串https://leetcode.cn/problems/palindrome-partitioning/ 给你一个字符串 s&#xff0c;请你将 s 分割成一些子串&#xff0c;使每个子串都是 回文串 。返回 s 所有可能的分割方案。 回文串 是正着读和反着读都一样的字符串。 示例 1&#xf…

购房合同的注意事项是什么呢?房子备案需要多久?

房屋登记需要多长时间&#xff1f; 购房合同要注意什么&#xff1f; 2019/02/20 10:02:07 来源&#xff1a;方天下观点&#xff08;6993&#xff09; [摘要] 购买房屋后&#xff0c;需要向房管部门办理房屋登记。 这样可以证明房子是在业主名下的&#xff0c;所以需要了解房屋…

c++学习记录 deque容器—排序

算法&#xff1a; sort(iterator beg,iterator end); //对beg和end区间内元素进行排序 #include<iostream> using namespace std; #include<deque> #include<algorithm>//标准算法头文件void printDeque(const deque<int>& d) {for …

tar压缩分包,解决git上传对文件的大小限制

分包 比如压缩包abc.tar.gz大于github要求的30M, 可以通过分包命令&#xff1a; tar czf - abc.tar.gz | split -b 20m - abc.tar.gz 将abc.tar.gz分成不大于20M的多个包&#xff0c;再提交到github. 合并包 使用时通过命令将包合并回来&#xff1a; cat abc.tar.gz* | tar …

【知识分享】Echarts雷达图组件封装

封装 Echarts 的雷达图&#xff08;radar chart&#xff09;组件也可以让你在 Vue 项目中更方便地使用雷达图。以下是封装 Echarts 雷达图组件的思路和示例代码&#xff1a; &#xff08;1&#xff09;继续沿用之前安装的 Echarts 和 Vue-Echarts 插件。 &#xff08;2&#…

FPGA-时钟管理单元

时钟管理单元(Clock Management Tile, CMT) : 即时钟管理片,是FPGA器件中一个十分重要的时钟资源。能够对内部和外部的时钟去偏斜、去抖动,同时还支持频率合成、分倍频等功能。 举例&#xff0c;下面这个例子数据从FIFO输出时钟频率为125MHZ&#xff0c;这个时钟频率可以通过…

flink重温笔记(八):Flink 高级 API 开发——flink 四大基石之 Window(涉及Time)

Flink学习笔记 前言&#xff1a;今天是学习 flink 的第八天啦&#xff01;学习了 flink 高级 API 开发中四大基石之一&#xff1a; window&#xff08;窗口&#xff09;知识点&#xff0c;这一部分只要是解决数据窗口计算问题&#xff0c;其中时间窗口涉及时间&#xff0c;计数…

Bert基础(五)--解码器(下)

1、 多头注意力层 下图展示了Transformer模型中的编码器和解码器。我们可以看到&#xff0c;每个解码器中的多头注意力层都有两个输入&#xff1a;一个来自带掩码的多头注意力层&#xff0c;另一个是编码器输出的特征值。 让我们用R来表示编码器输出的特征值&#xff0c;用M来…

【JavaEE进阶】 Spring AOP快速上手

文章目录 &#x1f343;什么是AOP&#x1f333;什么是Spring AOP&#x1f334;上手Spring AOP&#x1f6a9;引入依赖&#x1f6a9;编写AOP程序 ⭕总结 &#x1f343;什么是AOP AOP是Aspect Oriented Programming的简称&#xff08;又称为面向切⾯编程&#xff09; 什么是面向…

电力运维是做什么的?电力行业智能运维工作内容?

电力行业智能运维工作内容具体涉及哪些关键任务&#xff1f;实施智能运维过程中&#xff0c;如何利用现代信息技术、人工智能和大数据分析来提升电力系统的运行效率与维护响应速度?在电力行业中引入智能运维后&#xff0c;对于预防性维护、故障诊断、设备寿命预测以及成本控制…

33-k8s项目实战-02-k8s的ca证书有效期更新

一、概述 我们知道&#xff0c;k8s各项组件之间的通信&#xff0c;都是使用https协议进行的&#xff0c;也就是ca证书&#xff0c;那么我们也知道ca证书都是有“有限期的”&#xff0c;一旦过期&#xff0c;系统就无法进行通信了&#xff1b; 这也是k8s在企业当中经常遇到的证书…

利用Sora文生视频模型生成视频内容

随着人工智能技术的飞速发展,视频生成模型如Sora文生视频模型为视频创作领域带来了革命性的变革。这类模型能够根据输入的文本提示词,自动生成与描述相符的视频内容,极大地丰富了视频创作的可能性。在本篇文章中,我们将详细探讨如何利用Sora文生视频模型生成视频内容,并深…

亿道信息新三防平板EM-I10J,性能和价格成最大亮点

亿道信息近期推出了一款新三防平板电脑名为EM-I10J&#xff0c;这款设备上市的初衷是为了在满足客户作业需求的同时为其提供更合适的价格选择&#xff0c;但这并不意味着EM-I10J的实力可以被小觑。 外观上I10J与之前的I10U并无不同之处&#xff0c;同样是10.1英寸高清电容式触…

《TCP/IP详解 卷一》第10章 UDP和IP分片

目录 10.1 引言 10.2 UDP 头部 10.3 UDP校验和 10.4 例子 10.5 UDP 和 IPv6 10.6 UDP-Lite 10.7 IP分片 10.7.1 例子&#xff1a;IPV4 UDP分片 10.7.2 重组超时 10.8 采用UDP的路径MTU发现 10.9 IP分片和ARP/ND之间的交互 10.10 最大UDP数据报长度 10.11 UDP服务器…

华为OD技术面试案例3-2024年

技术一面&#xff1a; 1.手撕代码&#xff0c;算法题&#xff1a; 【最小路径和】 手撕代码通过&#xff0c;面试官拍了照片 2.深挖项目&#xff0c;做过的自认为最好的一个项目&#xff0c;描述做过的项目的工作过程&#xff0c;使用到哪些技术&#xff1f; 技术二面&…