我要评论方案一:
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>
结果如下:
方案二:
首先在elementui中 label 的值会被编译成表头名字，数组是按列逐个渲染，因此后端传过来的数组格式为 一个大数组里面有多个小数组，第一个数组为表头名称，其余数组为每行的数据值
data=[ ['产品产量（吨）\时间','2022-04-11','2022-04-12','2022-04-13','2022-04-14'], [0,0,0,0,0], [0,0,0,0,0], [0,0,0,0,0], [0,0,0,0,0] ]
当接收到后端穿的数组后进行处理，把表头数组单拿出来赋值为tablehead ，yielddata 即为数组行数据
getapi().then(res => {
if (res.status === 200) {
this.tablehead = res.data[0]
this.yielddata = res.data
this.yielddata.shift()
}
})
有了以上数据，则可以渲染数组，表头循环渲染，index 从0 开始，数据按列渲染
<el-table :data="yielddata" style="width: 100%" height="100%">
<el-table-column :label="item" width="227" v-for="(item, index) in tablehead" :key="index">
<template scope="scope">
{{ scope.row[index] }}
</template>
</el-table-column>
</el-table>到此这篇关于elementplus el-table(行列互换)转置的两种方法的文章就介绍到这了,更多相关element el-table行列互换内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论