快捷導(dǎo)航

elementplus el-table(行列互換)轉(zhuǎn)置的兩種方法

更新時(shí)間：2024年06月25日 09:39:00 作者：qq_21138747

本文主要介紹了elementplus el-table(行列互換)轉(zhuǎn)置,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

方案一:

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>
  <!-- 轉(zhuǎn)置代碼 -->
  <div>轉(zhuǎn)置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>

結(jié)果如下:

在這里插入圖片描述

方案二:

首先在elementui中 label 的值會(huì)被編譯成表頭名字，數(shù)組是按列逐個(gè)渲染，因此后端傳過(guò)來(lái)的數(shù)組格式為一個(gè)大數(shù)組里面有多個(gè)小數(shù)組，第一個(gè)數(shù)組為表頭名稱，其余數(shù)組為每行的數(shù)據(jù)值

Data=[
['產(chǎn)品產(chǎn)量（噸）\時(shí)間','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]
]

當(dāng)接收到后端穿的數(shù)組后進(jìn)行處理，把表頭數(shù)組單拿出來(lái)賦值為tableHead ，yieldData 即為數(shù)組行數(shù)據(jù)

 getApi().then(res => {
        if (res.status === 200) {
          this.tableHead = res.data[0]
          this.yieldData = res.data
          this.yieldData.shift()
        }
      })

有了以上數(shù)據(jù)，則可以渲染數(shù)組，表頭循環(huán)渲染，index 從0 開(kāi)始，數(shù)據(jù)按列渲染

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

到此這篇關(guān)于elementplus el-table(行列互換)轉(zhuǎn)置的兩種方法的文章就介紹到這了,更多相關(guān)element el-table行列互換內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: