当前位置: 首页 > news >正文

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 的执行阶段去执行&#xff08;其实质是执行的 Task 中的一系列 Action&#xff09;&#xff0c;所以 Task 的重要性不言而喻。 二、Task 2.1 Task 定义与配置 Task 的定义方式有如下两种&#xff1a; Task 的配置方式也有如下两种&#xf…...

【React 】折叠面板,点击展开时再请求数据

需求背景&#xff1a;使用折叠面板的形式展示数据&#xff0c;面板内部数据需要在打开时请求接口获取。 遇到问题&#xff1a;最开始使用Antd 的折叠面板组件&#xff0c;它对于数据直接渲染是没问题的&#xff0c;但是不好满足打开面板时再动态加载数据的需求&#xff0c;于是…...

c++学习 文件操作,模板

文件操作 #include<iostream> #include<string> #include<fstream> using namespace std; //文本操作 //程序运行时产生的数据都属于临时数据&#xff0c;程序一旦运行结束都会被释放 //通过文件可以数据持久化 //c中对文件操作包含头文件<fstream> /…...

开源与在线 M3U8 Downloader 项目介绍及使用指南

M3U8 是一种用于播放列表格式的文件类型&#xff0c;广泛应用于流媒体服务中&#xff0c;特别是 HLS&#xff08;HTTP Live Streaming&#xff09;协议。它包含了一系列的 TS&#xff08;Transport Stream&#xff09;视频片段地址&#xff0c;使得视频能够分段加载&#xff0c…...

正则表达式与文本处理器

正则表达式 基础正大表达式 查看特定字符 grep grep-n the test.txt grep-in the test.txt-n 显示行号 -i 不区分大小写 -v 反转查找 [] &#xff1a;中括号里可以写元素&#xff0c;内容符合任意元素&#xff0c;就会过滤出来 ^ :写在中括号里&#xff0c;代表取反。以^开头&…...

RedisTemplate方法一览表

数据类型RedisTemplate 方法Redis命令解释应用场景stringopsForValue().set(key, value)SET设置存储在指定 key 下的值存储简单数据&#xff0c;如用户的设置、配置项opsForValue().get(key)GET获取存储在指定 key 下的值读取存储的数据&#xff0c;如用户信息、配置参数opsFor…...

个人对devops的一点见解

DevOps 是一种将开发&#xff08;Development&#xff09;和运维&#xff08;Operations&#xff09;相结合的理念和实践方法。 它强调打破开发团队和运维团队之间的传统壁垒&#xff0c;促进两个团队之间更紧密的协作和沟通&#xff0c;以实现更高效、更快速、更可靠的软件交付…...

HarmonyOS鸿蒙应用开发基础知识

参考 HarmonyOS鸿蒙应用开发 (二、应用程序包结构理解及Ability的跳转&#xff0c;与Android的对比)_hap(harmonyos ability package)包的开发-CSDN博客 HarmonyOS NEXT下一代编程语言仓颉介绍及入门-CSDN博客...

Halcon 根据霍夫变换在图像中寻找直线

一 霍夫变换 1 定义 霍夫变换是图像处理中从图像中识别几何形状的基本方法之一.几何形状包括圆&#xff0c;椭圆&#xff0c;直线等等. 2 直线方程 直线的方程可以用yk*xb 来表示&#xff0c;其中k和b是参数&#xff0c;分别是斜率和截距; 3 霍夫变换原理&#xff1a; 设…...

基于Openmv的追小球的云台

介绍 在这篇文章&#xff0c;我会先介绍需要用到且需要注意的函数&#xff0c;之后再给出整体代码 在追小球的云台中&#xff0c;比较重要的部分就是云台&#xff08;实质上就是舵机&#xff09;的控制以及对识别的色块位置进行处理得到相应信息后控制云台进行运动 1、舵机模…...

关于scrapy模块中setting.py文件的介绍

作用 在Scrapy框架中&#xff0c;settings.py 文件起着非常重要的作用&#xff0c;它用于配置和控制整个Scrapy爬虫项目的行为、性能和功能。 setting.py文件的介绍 # Scrapy settings for haodaifu project # # For simplicity, this file contains only settings consider…...

laravel Blade 指令的趣味性

首先&#xff0c;我们通过几个要点来解释 Blade 引擎的工作原理。 您选择一个 Blade 模板进行渲染。引擎使用一系列正则表达式来解析和编译模板。该引擎生成一个普通的 PHP 文件并将其写入磁盘&#xff08;以便将其缓存以供将来渲染&#xff09;。包含 PHP 文件并使用输出缓冲…...

【面试题】等保(等级保护)的工作流程

等保&#xff08;等级保护&#xff09;的工作流程主要包括以下几个步骤&#xff0c;以下将详细分点介绍&#xff1a; 系统定级&#xff1a; 确定定级对象&#xff1a;根据《信息系统等级保护管理办法》和《信息系统等级保护定级指南》的要求&#xff0c;确定需要进行等级保护的…...

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中集成第三方库&#xff0c;如状态管理库Redux或路由库React Router&#xff0c;通常遵循一些常见的模式和最佳实践。下面是一些集成这些库的步骤和模式&#xff1a; 集成Redux 安装Redux及相关包: 安装Redux及其中间件&#xff08;如redux-thunk或redux-saga&#xf…...

JavaScript语法特性篇-空值合并运算符(??)

1、基本使用 空值合并运算符&#xff08;??&#xff09;英文名称为 Nullish coalescing operator&#xff0c;是一个逻辑运算符。 特性&#xff1a;当左侧的操作数为 null 或者 undefined 时&#xff0c;返回其右侧操作数&#xff0c;否则返回左侧操作数。 const foo nul…...

rancher快照备份至S3

巧用rancher的S3快照备份功能&#xff0c;快速实现集群复制、集群转移、完全崩溃后的极限修复 1.进入集群管理&#xff0c;在对应的集群菜单后&#xff0c;点击编辑配置 2.选择ETCD&#xff0c;启用&#xff0c;Backup Snapshots to S3选项 并填入你的minio 3 配置成功后 手…...

ChatGPT API教程在线对接OpenAI APIKey技术教程

一、OpenAI基本库介绍 您可以通过 HTTP 请求与 API 进行交互&#xff0c;这可以通过任何编程语言实现。我们提供官方的 Python 绑定、官方的 Node.js 库&#xff0c;以及由社区维护的库。 要安装官方的 Python 绑定&#xff0c;请运行以下命令&#xff1a; pip install open…...

随心而遇,跟着感觉走

分数限制下&#xff0c;选好专业还是选好学校&#xff1f; 24年高考结束&#xff0c;很多学生犹豫选择专业还是好学校&#xff0c;我的建议是&#xff0c;选择好学校。 本人体验来说&#xff0c;电子&#xff0c;工地&#xff0c;计科&#xff0c;数学&#xff0c;工科相关的…...

Opencv中的addweighted函数

一.addweighted函数作用 addweighted&#xff08;&#xff09;是OpenCV库中用于图像处理的函数&#xff0c;主要功能是将两个输入图像&#xff08;尺寸和类型相同&#xff09;按照指定的权重进行加权叠加&#xff08;图像融合&#xff09;&#xff0c;并添加一个标量值&#x…...

MVC 数据库

MVC 数据库 引言 在软件开发领域,Model-View-Controller(MVC)是一种流行的软件架构模式,它将应用程序分为三个核心组件:模型(Model)、视图(View)和控制器(Controller)。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系,以…...

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

高危文件识别的常用算法:原理、应用与企业场景

高危文件识别的常用算法&#xff1a;原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件&#xff0c;如包含恶意代码、敏感数据或欺诈内容的文档&#xff0c;在企业协同办公环境中&#xff08;如Teams、Google Workspace&#xff09;尤为重要。结合大模型技术&…...

【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张(Windows/Linux)

要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况&#xff0c;可以通过以下几种方式模拟或触发&#xff1a; 1. 增加CPU负载 运行大量计算密集型任务&#xff0c;例如&#xff1a; 使用多线程循环执行复杂计算&#xff08;如数学运算、加密解密等&#xff09;。运行图…...

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

让AI看见世界:MCP协议与服务器的工作原理

让AI看见世界&#xff1a;MCP协议与服务器的工作原理 MCP&#xff08;Model Context Protocol&#xff09;是一种创新的通信协议&#xff0c;旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天&#xff0c;MCP正成为连接AI与现实世界的重要桥梁。…...

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

HDFS分布式存储 zookeeper

hadoop介绍 狭义上hadoop是指apache的一款开源软件 用java语言实现开源框架&#xff0c;允许使用简单的变成模型跨计算机对大型集群进行分布式处理&#xff08;1.海量的数据存储 2.海量数据的计算&#xff09;Hadoop核心组件 hdfs&#xff08;分布式文件存储系统&#xff09;&a…...

【从零学习JVM|第三篇】类的生命周期(高频面试题)

前言&#xff1a; 在Java编程中&#xff0c;类的生命周期是指类从被加载到内存中开始&#xff0c;到被卸载出内存为止的整个过程。了解类的生命周期对于理解Java程序的运行机制以及性能优化非常重要。本文会深入探寻类的生命周期&#xff0c;让读者对此有深刻印象。 目录 ​…...