el-table横向数据表格实现

el-table横向数据表格实现

众所周知，el-table大部分场景下包括官方例子，table都是纵向数据，就是渲染每一项的数据是一列的

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>
</template>

<script lang="ts" setup>
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>

最近有个需求它是横向数据渲染，是一行一行的，之前没写过一时间没思路，现在解决了记录一下。

1. 首先肯定要给el-table加上:show-header="false"把表头取消
2. 请求返回的数据跟上述差不多，要想横向渲染需要处理一下数据格式

const formatSettings = (data) => {
  if (!data || !data.length) return []
  let typeList = ['类别']
  let testNameList = ['考核指标']
  let percentList = ['占比(%)']
  let criterionList = ['评分标准']
  let ruleList = ['计算方法']
  let formulaList = ['计算公式']
  let explanationList = ['说明']
  data.forEach(item => {
    typeList.push(item.category)
    testNameList.push(item.name)
    percentList.push(item.percent)
    criterionList.push(item.criterion)
    ruleList.push(item.rule)
    formulaList.push(item.formula)
    explanationList.push(item.explanation)
  })
  typeList = [...typeList, "总分"]
  percentList = [...percentList, "100"]
  tableTitle.value = typeList
  return [typeList, testNameList, percentList, criterionList, ruleList, formulaList, explanationList]
  }

3. 最后返回的数组就是表格的tableData，里面的每一项就是表格一行的数据

<el-table :data="tableData" border empty-text="暂无考核项" :show-header="false">
    <el-table-column align="center" v-for="(item, index) in  tableTitle " :key="index" width="160">
      <template #default="scope">
        {{ scope.row[index] || '--' }}
      </template>
    </el-table-column>
</el-table>