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>

相关文章:
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"wei…...
Gradle 核心之 Task
一、前言 只有 Task 才可以在 Gradle 的执行阶段去执行(其实质是执行的 Task 中的一系列 Action),所以 Task 的重要性不言而喻。 二、Task 2.1 Task 定义与配置 Task 的定义方式有如下两种: Task 的配置方式也有如下两种…...
【React 】折叠面板,点击展开时再请求数据
需求背景:使用折叠面板的形式展示数据,面板内部数据需要在打开时请求接口获取。 遇到问题:最开始使用Antd 的折叠面板组件,它对于数据直接渲染是没问题的,但是不好满足打开面板时再动态加载数据的需求,于是…...
c++学习 文件操作,模板
文件操作 #include<iostream> #include<string> #include<fstream> using namespace std; //文本操作 //程序运行时产生的数据都属于临时数据,程序一旦运行结束都会被释放 //通过文件可以数据持久化 //c中对文件操作包含头文件<fstream> /…...
开源与在线 M3U8 Downloader 项目介绍及使用指南
M3U8 是一种用于播放列表格式的文件类型,广泛应用于流媒体服务中,特别是 HLS(HTTP Live Streaming)协议。它包含了一系列的 TS(Transport Stream)视频片段地址,使得视频能够分段加载,…...
正则表达式与文本处理器
正则表达式 基础正大表达式 查看特定字符 grep grep-n the test.txt grep-in the test.txt-n 显示行号 -i 不区分大小写 -v 反转查找 [] :中括号里可以写元素,内容符合任意元素,就会过滤出来 ^ :写在中括号里,代表取反。以^开头&…...
RedisTemplate方法一览表
数据类型RedisTemplate 方法Redis命令解释应用场景stringopsForValue().set(key, value)SET设置存储在指定 key 下的值存储简单数据,如用户的设置、配置项opsForValue().get(key)GET获取存储在指定 key 下的值读取存储的数据,如用户信息、配置参数opsFor…...
个人对devops的一点见解
DevOps 是一种将开发(Development)和运维(Operations)相结合的理念和实践方法。 它强调打破开发团队和运维团队之间的传统壁垒,促进两个团队之间更紧密的协作和沟通,以实现更高效、更快速、更可靠的软件交付…...
HarmonyOS鸿蒙应用开发基础知识
参考 HarmonyOS鸿蒙应用开发 (二、应用程序包结构理解及Ability的跳转,与Android的对比)_hap(harmonyos ability package)包的开发-CSDN博客 HarmonyOS NEXT下一代编程语言仓颉介绍及入门-CSDN博客...
Halcon 根据霍夫变换在图像中寻找直线
一 霍夫变换 1 定义 霍夫变换是图像处理中从图像中识别几何形状的基本方法之一.几何形状包括圆,椭圆,直线等等. 2 直线方程 直线的方程可以用yk*xb 来表示,其中k和b是参数,分别是斜率和截距; 3 霍夫变换原理: 设…...
基于Openmv的追小球的云台
介绍 在这篇文章,我会先介绍需要用到且需要注意的函数,之后再给出整体代码 在追小球的云台中,比较重要的部分就是云台(实质上就是舵机)的控制以及对识别的色块位置进行处理得到相应信息后控制云台进行运动 1、舵机模…...
关于scrapy模块中setting.py文件的介绍
作用 在Scrapy框架中,settings.py 文件起着非常重要的作用,它用于配置和控制整个Scrapy爬虫项目的行为、性能和功能。 setting.py文件的介绍 # Scrapy settings for haodaifu project # # For simplicity, this file contains only settings consider…...
laravel Blade 指令的趣味性
首先,我们通过几个要点来解释 Blade 引擎的工作原理。 您选择一个 Blade 模板进行渲染。引擎使用一系列正则表达式来解析和编译模板。该引擎生成一个普通的 PHP 文件并将其写入磁盘(以便将其缓存以供将来渲染)。包含 PHP 文件并使用输出缓冲…...
【面试题】等保(等级保护)的工作流程
等保(等级保护)的工作流程主要包括以下几个步骤,以下将详细分点介绍: 系统定级: 确定定级对象:根据《信息系统等级保护管理办法》和《信息系统等级保护定级指南》的要求,确定需要进行等级保护的…...
python调用麦克风和扬声器,并调用阿里云实时语音转文字
import time import queue import sounddevice as sd import numpy as np import nls import sys# 阿里云配置信息 URL "wss://nls-gateway-cn-shanghai.aliyuncs.com/ws/v1" TOKEN "XXXX" # 参考https://help.aliyun.com/document_detail/450255.html获…...
描述在React中集成第三方库(如Redux或React Router)的常见模式。
在React中集成第三方库,如状态管理库Redux或路由库React Router,通常遵循一些常见的模式和最佳实践。下面是一些集成这些库的步骤和模式: 集成Redux 安装Redux及相关包: 安装Redux及其中间件(如redux-thunk或redux-saga…...
JavaScript语法特性篇-空值合并运算符(??)
1、基本使用 空值合并运算符(??)英文名称为 Nullish coalescing operator,是一个逻辑运算符。 特性:当左侧的操作数为 null 或者 undefined 时,返回其右侧操作数,否则返回左侧操作数。 const foo nul…...
rancher快照备份至S3
巧用rancher的S3快照备份功能,快速实现集群复制、集群转移、完全崩溃后的极限修复 1.进入集群管理,在对应的集群菜单后,点击编辑配置 2.选择ETCD,启用,Backup Snapshots to S3选项 并填入你的minio 3 配置成功后 手…...
ChatGPT API教程在线对接OpenAI APIKey技术教程
一、OpenAI基本库介绍 您可以通过 HTTP 请求与 API 进行交互,这可以通过任何编程语言实现。我们提供官方的 Python 绑定、官方的 Node.js 库,以及由社区维护的库。 要安装官方的 Python 绑定,请运行以下命令: pip install open…...
随心而遇,跟着感觉走
分数限制下,选好专业还是选好学校? 24年高考结束,很多学生犹豫选择专业还是好学校,我的建议是,选择好学校。 本人体验来说,电子,工地,计科,数学,工科相关的…...
深度学习在微纳光子学中的应用
深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向: 逆向设计 通过神经网络快速预测微纳结构的光学响应,替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...
python/java环境配置
环境变量放一起 python: 1.首先下载Python Python下载地址:Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个,然后自定义,全选 可以把前4个选上 3.环境配置 1)搜高级系统设置 2…...
STM32+rt-thread判断是否联网
一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...
visual studio 2022更改主题为深色
visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中,选择 环境 -> 常规 ,将其中的颜色主题改成深色 点击确定,更改完成...
ServerTrust 并非唯一
NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...
相机Camera日志分析之三十一:高通Camx HAL十种流程基础分析关键字汇总(后续持续更新中)
【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了:有对最普通的场景进行各个日志注释讲解,但相机场景太多,日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志,通过下列分类关键字搜索,即可清晰的分析不同场景的相机运行流程差异…...
JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作
一、上下文切换 即使单核CPU也可以进行多线程执行代码,CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短,所以CPU会不断地切换线程执行,从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...
06 Deep learning神经网络编程基础 激活函数 --吴恩达
深度学习激活函数详解 一、核心作用 引入非线性:使神经网络可学习复杂模式控制输出范围:如Sigmoid将输出限制在(0,1)梯度传递:影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...
微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据
微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列,以便知晓哪些列包含有价值的数据,…...
RSS 2025|从说明书学习复杂机器人操作任务:NUS邵林团队提出全新机器人装配技能学习框架Manual2Skill
视觉语言模型(Vision-Language Models, VLMs),为真实环境中的机器人操作任务提供了极具潜力的解决方案。 尽管 VLMs 取得了显著进展,机器人仍难以胜任复杂的长时程任务(如家具装配),主要受限于人…...
