elementplus el-table(行列互换)转置的两种方法
作者：qq_21138747
本文主要介绍了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>
结果如下:
方案二:
首先在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行列互换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！