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>

结果如下:
添加链接描述

方案二:

https://blog.csdn.net/qq_41026858/article/details/125064928

相关推荐
DoraBigHead13 分钟前
this 的前世今生:谁在叫我,我听谁的
前端·javascript·面试
蓝婷儿1 小时前
每天一个前端小知识 Day 28 - Web Workers / 多线程模型在前端中的应用实践
前端
琹箐1 小时前
Ant ASpin自定义 indicator 报错
前端·javascript·typescript
小小小小小惠1 小时前
Responsetype blob会把接口接收的二进制文件转换成blob格式
前端·javascript
爱电摇的小码农1 小时前
【深度探究系列(5)】:前端开发打怪升级指南:从踩坑到封神的解决方案手册
前端·javascript·css·vue.js·node.js·html5·xss
kymjs张涛1 小时前
零一开源|前沿技术周报 #7
android·前端·ios
爱编程的喵1 小时前
React入门实战:从静态渲染到动态状态管理
前端·javascript
Tttian6222 小时前
npm init vue@latestnpm error code ETIMEDOUT
前端·vue.js·npm
患得患失9492 小时前
【前端】【组件库开发】【原理】【无框架开发】现代网页弹窗开发指南:从基础到优化
前端
唐叔在学习2 小时前
不用装插件!3轮对话,我用油猴脚本+AI复刻了掘金闪念笔记,真香!
javascript·浏览器