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-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>

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【ajax基础03】常用ajax请求方法和数据提交以及axios错误处理

目录 一&#xff1a;请求方法 什么是请求方法&#xff1a; 常见请求方法如下 二&#xff1a;axios中应用 语法格式&#xff1a; 案例&#xff1a; axios错误处理 三&#xff1a;如何赚钱 一&#xff1a;请求方法 什么是请求方法&#xff1a; 浏览器对服务器资源&…

Android Media Framework(八)OMXNodeInstance - Ⅰ

OpenMAX框架的学习有两大难点&#xff0c;一是组件的状态切换与buffer的流转过程&#xff0c;这部分内容我们已经在IL Spec中学习过了&#xff1b;二是OMX组件使用的buffer类型与buffer分配过程&#xff0c;这一节我们来重点剖析OMX组件使用的buffer类型。 1、引言 在实际应用…

提取图像主色调

依赖 Pillow 库。 提取图像主色调&#xff0c;直接上代码&#xff1a; from PIL import Imagedef extract_main_color(img_path: str, delta_h: float 0.3) -> str:"""获取图像主色调Args:img_path: 输入图像的路径delta_h: 像素色相和平均色相做减法的绝…

17.RedHat认证-Ansible自动化运维(下)

17.RedHat认证-Ansible自动化运维(下) 这个章节讲ansible的变量&#xff0c;包括变量的定义、变量的规则、变量范围、变量优先级、变量练习等。 以及对于tasks的控制&#xff0c;主要有loop循环作业、条件判断等 变量 介绍 Ansible支持变量功能&#xff0c;能将value存储到…

记录react实现选择框一二级联动出现的问题

需求&#xff1a;用户在选择第一个选择框的选项后&#xff0c;第二个选择框的选项会根据第一个选择框的选择动态更新。如图所示 出现的问题 一级分类选择之后二级分类没有数据&#xff0c;第二次重新选择一级分类的时候&#xff0c;二级分类就会有值。 第一次点击截图&#x…

MongoDB数据库的安装和删除

MongoDB数据库的删除和安装 1、删除MongoDB数据库2、下载MongoDB数据库1)、自定义安装2)、注意可视化可以取消勾选 1、删除MongoDB数据库 没有下载过的&#xff0c;可以直接跳到下面的安装过程↓ 我们电脑中如果有下载过MongoDB数据库&#xff0c;要更换版本的话&#xff0c;其…

IntelliJ IDEA2024 for Mac Java代码编辑器

Mac分享吧 文章目录 效果一、下载软件二、开始安装1、双击运行软件&#xff08;适合自己的M芯片版或Intel芯片版&#xff09;&#xff0c;将其从左侧拖入右侧文件夹中&#xff0c;等待安装完毕2、应用程序显示软件图标&#xff0c;表示安装成功3、打开访达&#xff0c;点击【文…

基于Java蛋糕甜品商城系统设计和实现(源码+LW+调试文档+讲解等)

&#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN作者、博客专家、全栈领域优质创作者&#xff0c;博客之星、平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌&#x1f497; &#x1f31f;文末获取源码数据库&#x1f31f;感兴趣的可以先收藏起来&#xff0c;还…

Python使用策略模式绘制图片分析多组数据

趋势分析&#xff1a;折线图静态比较&#xff1a;条形图分布分析&#xff1a;箱线图离散情况&#xff1a;散点图 import matplotlib.pylab as plt from abc import ABC, abstractmethod import seaborn as sns import pandas as pd import plotly.graph_objects as go import p…

人机恋爱新趋势:与AI男友谈恋爱的甜蜜与挑战

"我曾经把ChatGPT当成工具&#xff0c;从未追过星&#xff0c;也没有嗑过CP。没想到&#xff0c;到了36岁&#xff0c;我竟然嗑上了AI男友。Open AI&#xff0c;你赢了。你不仅是最好的AI公司&#xff0c;还是乙女游戏公司。" 转行大龄互联网人&#xff0c;走遍20国…

Go 语言学习笔记之字典 Map

Go 语言中的字典 Map 大家好&#xff0c;我是码农先森。 概念 在 Go 语言中&#xff0c;字典被称为 map&#xff0c;它是一种无序的集合&#xff0c;用于存储键值对。每个键在 map 中必须是唯一的&#xff0c;并且对应一个值。map 是一种非常常用的数据结构&#xff0c;用于…

03-Shell编程之循环语句与函数

目录 3.1 for循环语句 3.1.1for语句的结构 3.1.2 for语句应用实例 3.2 使用whlie循环语句 1.打印数字1到5 3.3 使用until循环语句 3.3.1until的实例 1.打印数字1到5&#xff08;使用until的逆向逻辑&#xff09; 2.等待用户输入特定内容 3.4 函数 3.4.1Shell函数的基…

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

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

Mysql索引底层数据结构——Java全栈知识(28)

Mysql索引底层数据结构 1、什么是索引 索引在项目中还是比较常见的&#xff0c;它是帮助MySQL高效获取数据的数据结构&#xff0c;主要是用来提高数据检索的效率&#xff0c;降低数据库的IO成本&#xff0c;同时通过索引列对数据进行排序&#xff0c;降低数据排序的成本&…

【UEFI实战】HttpBoot

环境配置 首先下载tftpd工具&#xff0c;可以在phjounin / tftpd64 / Downloads — Bitbucket下载到&#xff0c;建议不要安装到C盘&#xff0c;因为可能无法修改其配置。配置tftpd工具的DHCP服务&#xff1a; 注意这里的IP地址需要跟实际网卡IP匹配。 下载Apache&#xff0c…

探秘神经网络激活函数:Sigmoid、Tanh和ReLU,解析非线性激活函数的神奇之处

引言 在神经网络中&#xff0c;激活函数扮演着至关重要的角色。它们赋予神经网络非线性的能力&#xff0c;使得网络具备学习和表示复杂函数关系的能力。本文将详细解析三种常见的激活函数&#xff1a;Sigmoid、Tanh和ReLU&#xff0c;揭开它们在神经网络中的奥秘。无论你是初学…

MOE学习笔记

MOE网络结构 和传统的 transformer 网络结构相比&#xff0c;我们将 Transformer 模型的每个 FFN 层替换为 MoE 层&#xff0c;MoE 层由门网络&#xff08;Router&#xff09;和一定数量的专家&#xff08;Expert&#xff09;组成。 这些 Expert 其实也是 FFN 层&#xff0c;…

光伏半导体的种类

光照射半导体材料时&#xff0c;其电导率发生变化的实质是光生载流子的产生。在半导体中&#xff0c;价带中的电子受到一定能量的光子激发后&#xff0c;可以跃迁到导带&#xff0c;形成自由电子和空穴对&#xff0c;即光生载流子。这些光生载流子会增加半导体的导电能力&#…

思考-生涯思考-GPT-5对人们的影响

GPT-5 一年半后发布&#xff1f;对此你有何期待&#xff1f; IT之家6月22日消息&#xff0c;在美国达特茅斯工程学院周四公布的采访中&#xff0c;OpenAI首席技术官米拉穆拉蒂被问及GPT-5是否会在明年发布&#xff0c;给出了肯定答案并表示将在一年半后发布。此外&#xff0c;…

MOC和MCS通讯流程分析

半导体行业-SECS/GEM协议 半导体设备通讯SECS协议是由国际半导体设备与材料协会&#xff08;SEMI&#xff09;的会员一起构建的连接性标准。它最初是为了在半导体/电子行业的自动化中实现设备与主机系统之间的通信而制定的。 SECS/GEM不仅允许客户查看设备的功能&#xff0c;…