elementplus el-table(行列互换)转置

Element Plus v2.4.0, repl v3.4.0

<template>
<div><el-table :data="tableData" style="width: 100%"><el-table-column prop="name" label="名字" width="180" /><el-table-column prop="weight" label="重量" width="180" /><el-table-column prop="maxWeight" label="最大重量" width="180" /><el-table-column prop="height" label="高度" width="180" /><el-table-column prop="width" label="宽度" width="180" /><el-table-column prop="speed" label="速度" width="180" /></el-table><!-- 转置代码 --><div>转置table</div><el-table :data="trans_tableData" style="width:100%"><el-table-columnprop="title"label=""></el-table-column><el-table-columnv-for="(item,index) in props":key="index":prop="item.value":label="item.label"><template v-slot:header><span v-html="item.label"></span></template><template v-slot="{ row }"><span>{{ row[item.value] }}</span></template></el-table-column>
</el-table>
</div>
</template><script lang="ts" setup>
let tableData = [{name: '歼-20',weight: '25吨',maxWeight: '37吨',height: '4.69米',width: '21.2米',speed: '2马赫'},{name: '歼-20-1',weight: '25吨-1',maxWeight: '37吨-1',height: '4.69米-1',width: '21.2米-1',speed: '2马赫-1'}]
const props = tableData.map((t) => {return {label: t.name,value: t.id || t.name}
})
console.log("props=",props)
function isExist (newArr, name) {for (let i = 0; i < newArr.length; i++) {if (newArr[i].title === name) {return newArr[i]}}return false
}/***  定义映射字段表(最好取全量字段)* */
const mapObj = {name: '名称',weight: '重量',maxWeight: '最大载重',height: '高度',width: '宽度',speed: '速度'}
const newArr = []
for (const t in mapObj) {for (let i = 0; i < tableData.length; i++) {const item = tableData[i]const result = isExist(newArr, mapObj[t])if (result) {result[item.name] = item[t] || ''} else {const obj = {}obj.title = mapObj[t]obj[item.name] = item[t] || ''newArr.push(obj)}}
}
console.log("newArr",newArr)
const trans_tableData = newArr
</script>

在这里插入图片描述

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

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

相关文章

如何linux 查询进程和杀死进程

在程序开启长链接的时候&#xff0c;有时候会发现端口被占用的情况&#xff0c;但是又没有启动相关的端口&#xff0c;所以我们需要将端口占用结束掉 1.使用指令netstat -ntlp 查看当前有哪些进程&#xff0c;如图&#xff1a; 2.使用指令kill -9 18785 杀死进程&#xff0c…

Charles抓包工具系列文章(一)-- Compose 拼接http请求

一、背景 众所周知&#xff0c;Charles是一款抓包工具&#xff0c;当然是http协议&#xff0c;不支持tcp。&#xff08;如果你想要抓tcp包&#xff0c;请转而使用wireshark&#xff0c;在讲述websocket的相关技术有梳理过wireshark抓包&#xff09; 话说回来&#xff0c;char…

【自然语言处理系列】Python 字符串操作技巧:清理、替换与合并

在编写Python程序时&#xff0c;字符串处理是一项常见的任务。了解如何有效地清理、修改和合并字符串对于数据预处理、文本分析和日常编程都至关重要。本文将引导您通过一系列实用的示例来掌握Python中字符串的核心操作&#xff0c;包括去除不需要的空格和特殊字符、替换文本中…

【机器学习项目实战(二)】基于朴素贝叶斯的中文垃圾短信分类

完整代码、数据集和相应的报告 链接已经放在了正文最下方, 供大家参考学习 摘要 ​ 本文探讨了中文垃圾短信分类的问题,通过收集实际数据集,运用多种机器学习算法进行分类,并对比了不同算法在垃圾短信分类任务上的性能。本研究旨在提高中文垃圾短信的识别准确率,为构建更…

java溯本求源之基础(二十五)之--ArrayList常用方法介绍

1. 介绍 1.1简介 ArrayList ArrayList 是 Java 集合框架中的一个类&#xff0c;位于 java.util 包中。它实现了 List 接口&#xff0c;提供了一个动态数组的功能。与普通数组不同&#xff0c;ArrayList 可以在需要时自动调整其容量&#xff0c;以容纳更多的元素。这使得它非常…

鸣潮基于虚幻引擎4的多平台效果和性能优化实践

《鸣潮》基于虚幻引擎4的多平台效果和性能优化实践 | 王宏波 库洛游戏 文章目录 《鸣潮》基于虚幻引擎4的多平台效果和性能优化实践 | 王宏波 库洛游戏Why Deferred Shading移动端高质量的TAAU渲染流程Ghost和Flicker优化&#xff0c;一些图像空间算法的融入动静态像素的差异处…

第三代全智能AI无人直播系统:销售变现的革新利器

随着科技的飞速发展&#xff0c;人工智能&#xff08;AI&#xff09;已经(keJ0277)逐渐渗透到我们生活的方方面面。特别是在直播销售领域&#xff0c;第三代全智能AI无人直播系统的出现&#xff0c;正成为销售变现的革新利器&#xff0c;引领着行业的新一轮变革。一、全智能AI无…

mysql数据库的管理

MySQL数据库管理 mysql数据文件 存放在初始化时定义的datadir 该目录下放置三种后缀文件 .frm 与表相关的元数据&#xff08;meta&#xff09;&#xff0c;表结构的定义信息等。 .MYD mylSAM存储引擎专用 .MYI mylSAM存储引擎专用 MySQL语言类型 DDL&#xff08;数据定义语言…

App推广新突破!Xinstall无注册码方案,一键解决您的获客难题

在互联网的浪潮中&#xff0c;App推广与运营面临着前所未有的挑战。随着流量红利的衰退&#xff0c;如何高效、精准地触达用户&#xff0c;提升用户留存和转化率&#xff0c;成为每个企业都必须面对的问题。在这个关键时刻&#xff0c;Xinstall以其无注册码的解决方案&#xff…

使用vant4+vue3制作电商购物网站

一、前言 1.本项目基于vant4vue3构建&#xff0c;默认友友们已具备相关知识&#xff0c;如不具备&#xff0c;请友友们先去了解相关该概念 2.项目数据来源于开源框架 新峰商城 在此指出 3.此项目目的在于帮助友友们了解基本的用法&#xff0c;没有涉及太多的逻辑操作。 二、…

针对AIGC检测的鲁棒性测试——常见攻击手段汇总

前言&#xff1a;这篇文章来总结一下针对AIGC检测的常见攻击手段&#xff0c;选取的研究工作均出自近5年AIGC检测相关文章。&#xff08;论文被拒了需要补实验&#xff0c;先来看看别人怎么做的……&#xff09; 2019 WIFS Detecting and Simulating Artifacts in GAN Fake Ima…

JavaScript的学习之事件的简介

目录 一、事件是什么 二、如何处理事件 一、事件是什么 定义&#xff1a;事件就是浏览器和用户之间的交互行为。 例如&#xff1a;点击按钮、鼠标移动、关闭窗口等。 二、如何处理事件 我们可以在对应的事件属性中设置一些JS行为&#xff0c;当事件触发的时候会将这些代码执行…

35岁,是终点?还是拐点?

35岁&#xff0c;是终点还是拐点&#xff0c;取决于我们对生活和事业的态度、目标以及行动。这个年龄可以看作是一个重要的转折点&#xff0c;具有多重意义和可能性。 很多人在35岁时&#xff0c;已经在自己的职业生涯中建立了一定的基础&#xff0c;可能达到了管理层或专家级别…

Charles抓包工具系列文章(二)-- Repeat 回放http请求

一、什么是http请求回放 当我们对客户端进行抓包&#xff0c;经常会想要重试http请求&#xff0c;或者改写原有部分进行重新请求&#xff0c;都需要用到回放http请求。 还有一种场景是压力测试&#xff0c;对一个请求进行重复请求多少次&#xff0c;并加上适当的并发度。 这里…

WebStorm 配置 PlantUML

1. 安装 PlantUML 插件 在 WebStorm 插件市场搜索 PlantUML Integration 并安装&#xff0c;重启 WebStorm 使插件生效。 2. 安装 Graphviz PlantUML 需要 Graphviz 来生成图形。使用 Homebrew 安装 Graphviz&#xff1a; 打开终端&#xff08;Terminal&#xff09;。确保你…

C语言小例程28/100

题目&#xff1a;利用递归方法求5!。 程序分析&#xff1a;递归公式&#xff1a;fnfn_1*4! #include <stdio.h>int main() {int i;int fact(int);for(i0;i<6;i){printf("%d!%d\n",i,fact(i));} } int fact(int j) {int sum;if(j0){sum1;} else {sumj*fac…

闪迪sd卡视频格式化数据恢复方法,你了解吗

咨询&#xff1a;“我不小心将闪迪SD卡格式化了&#xff0c;里面的重要视频文件全都不见了。我感到非常焦虑&#xff0c;因为这些视频对我来说意义非凡。现在急需找到方法来恢复&#xff01;&#xff01;” 在数字时代&#xff0c;SD卡已成为我们日常生活中不可或缺的数据存储设…

python中数据的作用域

一、命名空间 在 Python 中&#xff0c;命名空间是一个系统&#xff0c;它用于确保名字的唯一性&#xff0c;并防止命名冲突。命名空间是一个存储变量名称&#xff08;或者更广泛地说&#xff0c;标识符&#xff09;与对象之间映射的抽象概念。每个变量名你在程序中创建&#x…

msvcp120.dll丢失怎么办,找不到msvcp120.dll的多种解决方法

最近&#xff0c;我在运行一个程序时遇到了一个错误&#xff0c;系统提示找不到msvcp120.dll文件&#xff0c;无法继续执行代码。这让我感到非常困扰&#xff0c;因为这个问题导致我无法正常运行这个程序。经过一番搜索和尝试&#xff0c;我找到了几种修复这个问题的方法&#…

如何开发、使用 Starter

开发 第一步&#xff1a;创建starter工程hello-spring-boot-starter并配置pom.xml文件 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchem…