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

news2024/11/17 0:08:04

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-column
          prop="title"
          label="">
        </el-table-column>
        <el-table-column
          v-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.coloradmin.cn/o/1859250.html

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

相关文章

Spring Boot 快速入门4 ——JSR-303 数据校验

目录 一、前言 二、JSR303 简介 三、使用方法 常用注解 Validated、Valid区别 四、编写测试代码&#xff1a; 1. 实体类添加校验 2. 统一返回类型 3. 测试类 4.我们把异常返回给页面 5.抽离全局异常处理 2. 书写ExceptionControllerAdvice 一、前言 我们在日常开发…

SpringMVC系列二: 请求方式介绍

RequestMapping &#x1f49e;基本使用&#x1f49e;RequestMapping注解其它使用方式可以修饰类和方法可以指定请求方式可以指定params和headers支持简单表达式支持Ant 风格资源地址配合PathVariable 映射 URL 绑定的占位符注意事项和使用细节课后作业 上一讲, 我们学习的是Spr…

《昇思25天学习打卡营第1天|onereal》

昇思25天学习打卡营第1天;有点一头雾水的感觉&#xff0c;说是要在jupyter中签到打卡&#xff0c;是不是就是复制粘贴。我以为是要在终端机器中运行代码呢。 如果只是粘贴代码&#xff0c;那未免太简单了。 我还是想运行这个算力机器&#xff0c;但是他们说每次只能2小时。太…

中国4个民族群体的全基因组DNA甲基化变异图谱首次发布

2023年4月&#xff0c;由西北工业大学联合复旦大学等院校在Science China Life Sciences上发表题为“Genome-wide DNA methylation landscape of four Chinese populations and epigenetic variation linked to Tibetan high altitude adaptation”的文章&#xff0c;该研究通过…

Qt 信号与槽的使用详解 - 多种绑定形式、同步异步、Lambda表达式等

Qt 信号与槽的使用详解 - 多种绑定形式、同步异步、Lambda表达式等 引言一、信号与槽常见的绑定形式二、信号与槽的连接方式 - 同步异步 引言 在Qt框架中&#xff0c;信号与槽&#xff08;Signals and Slots&#xff09;机制是一种强大的通信方式&#xff0c;它允许对象之间进…

讲座学习截图——《CAD/CAE/CAM几何引擎-软件概述》(一)

目录 引出CAD/CAE/CAM几何引擎-软件概述 郝建兵CADCAECAM 几何模型内核ACIS 两个老大之一Open CascadeParasolid 两个老大之一Autodesk的内核 总结其他自定义信号和槽1.自定义信号2.自定义槽3.建立连接4.进行触发 自定义信号重载带参数的按钮触发信号触发信号拓展 lambda表达式…

贝锐花生壳内网穿透

贝锐花生壳内网穿透使用步骤 首先你得去官网购买一个域名配置一下内网穿透映射官网下载一个客户端修改代码配置 首先你得去官网购买一个域名 配置一下内网穿透映射 官网下载一个客户端 注意&#xff0c;一定要下载客户端&#xff0c;不然用不了 当然&#xff0c;本地我已经提前…

小程序中用font-spider压缩字体后,字体没效果(解决办法)

因为项目中需要引入外部字体&#xff0c;有两种方案&#xff0c; 第一是把字体下载到本地&#xff0c; 第二种是cdn请求服务器放字体的地址 但是小程序是有大小限制的&#xff0c;所以必须要压缩字体大小&#xff0c;这时候有些人就说了&#xff0c;那把字体放在服务器上&a…

日常-----最爱的人

今日话题 大家好嗷&#xff0c;今天聊的技术可比之前的重要的多啊&#xff0c;哼哼&#xff0c;也不是今天&#xff0c;大家像我看齐嗷&#xff0c;我宣布个事情&#xff01;&#xff01;&#xff01; 于2024年6月21日晚上&#xff0c;本人遇到了这一生最爱的人 嘿嘿 这种事…

一、Vue 世界初探

我们既然使用idea,当然需要一些配置&#xff0c;不使用idea 的可以忽略。 1、我们打开settings 下载vue.js 插件&#xff0c;然后重启。打开我们创建的项目zlflovemmVue 2、配置js 版本 ECMAScript6 3、HTML 增加 .vue 支持 4、启动项目&#xff0c;在edit Configurations 中增…

【Pandas驯化-15】Pandas中几个特征工程函get_dummies、factorize、diff、rank技巧

【Pandas驯化-15】Pandas中几个特征工程函get_dummies、factorize、diff、rank技巧 本次修炼方法请往下查看 &#x1f308; 欢迎莅临我的个人主页 &#x1f448;这里是我工作、学习、实践 IT领域、真诚分享 踩坑集合&#xff0c;智慧小天地&#xff01; &#x1f387; 相关内…

JAVA SDK 整合 AI 大语言模型

目前主流模型厂商的 SDK 并没有很好的支持 JAVA 环境&#xff0c;主流还是使用的 Python &#xff0c;如果希望将 AI 功能集成到业务中来&#xff0c;则需要找找有没有一些现成的开源项目&#xff0c;但是这种项目一般需要谨慎使用&#xff0c;以防有偷取 app_key 等风险问题 前…

python爬虫必须要高匿IP吗 ?

各个平台搜索关键词就可以找到不同品牌的代理IP了。 找倒是不难&#xff0c;难的是能从中挑选出靠谱且合适的代理品牌。 在选择代理IP这块&#xff0c;不建议使用免费和超低价的代理&#xff0c;因为这一类的代理往往非常不稳定&#xff0c;很多都被网站拉黑过&#xff0c;特…

比较(四)利用python绘制平行坐标图

比较&#xff08;四&#xff09;利用python绘制平行坐标图 平行坐标图&#xff08;Parallel coordinate plot&#xff09;简介 平行坐标图可以显示多变量的数值数据&#xff0c;最适合用来同一时间比较许多变量&#xff0c;并表示它们之间的关系。缺点也很明显&#xff0c; 不…

Pandas中将列类型从字符串转换为日期时间格式

在Pandas中处理数据时&#xff0c;遇到时间序列数据并不罕见&#xff0c;我们知道Pandas是在python中处理时间序列数据的非常有用的工具。 让我们看看如何将字符串的字符串列&#xff08;dd/mm/yyyy格式&#xff09;转换为datetime格式。如果日期的格式不正确&#xff0c;我们…

分享:Khoj:你的全能AI助手

在数字化时代&#xff0c;我们每天都会面对海量的信息&#xff0c;如何高效地管理和检索这些信息&#xff0c;同时提升工作效率&#xff0c;成为了许多人关注的焦点。为此&#xff0c;Khoj应运而生——一个功能强大、灵活多变的个人化AI助手&#xff0c;旨在助力用户轻松驾驭信…

AI绘画Stable Diffussion 实操教程: 真人图片秒变动漫风,亲手绘制你的专属动漫头像

大家好&#xff0c;我是向阳 你是否曾幻想过自己置身于动漫世界&#xff0c;拥有那些令人羡慕的二次元特征&#xff1f;随着人工智能技术的飞速发展&#xff0c;这一幻想已不再遥不可及。在本文中&#xff0c;我们将一起揭开Stable Diffusion技术的神秘面纱&#xff0c;探索如…

STM32学习笔记(十一)--SPI总线协议详解

概述&#xff1a;Serial Peripheral Interface&#xff0c;一组多从 传输速率比I2C快 但是线多 无应答 是一种同步&#xff08;具有时钟线需要同步时钟SCL&#xff09;、串行&#xff08;一位一位的往一个方向发送&#xff09;、全双工&#xff08;发送接收同时&#xff09;通…

Nvidia Isaac Sim图编程OmniGraph 入门教程 2024(6)

Nvidia Isaac Sim 入门教程 2024 版权信息 Copyright 2023-2024 Herman YeAuromix. All rights reserved.This course and all of its associated content, including but not limited to text, images, videos, and any other materials, are protected by copyright law. …

嵌入式实验---实验八 ADC电压采集实验

一、实验目的 1、掌握STM32F103ADC电压采集程序设计流程&#xff1b; 2、熟悉STM32固件库的基本使用。 二、实验原理 1、使用STM32F103R6采集可变电阻上的电压信号&#xff0c;并通过计算把当前ADC转换值和电压值显示在LCD1602液晶屏上&#xff1b; 2、对照电压表读数&…