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

相关推荐
Lysun0015 分钟前
[less] Operation on an invalid type
前端·vue·less·sass·scss
土豆湿12 分钟前
拥抱极简主义前端开发:NoCss.js 引领无 CSS 编程潮流
开发语言·javascript·css
J总裁的小芒果20 分钟前
Vue3 el-table 默认选中 传入的数组
前端·javascript·elementui·typescript
Lei_zhen9623 分钟前
记录一次electron-builder报错ENOENT: no such file or directory, rename xxxx的问题
前端·javascript·electron
辣条小哥哥24 分钟前
electron主进程和渲染进程之间的通信
javascript·electron·ecmascript
咖喱鱼蛋25 分钟前
Electron一些概念理解
前端·javascript·electron
yqcoder27 分钟前
Vue3 + Vite + Electron + TS 项目构建
前端·javascript·vue.js
鑫宝Code44 分钟前
【React】React Router:深入理解前端路由的工作原理
前端·react.js·前端框架
Mr_Xuhhh2 小时前
重生之我在学环境变量
linux·运维·服务器·前端·chrome·算法
永乐春秋3 小时前
WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性
前端