el-table行转列,默认第一列写死

<template>
  <el-table :data="tableData" style="width: 100%">
    <!-- <el-table-column prop="date" label="日期" width="180"> </el-table-column>
    <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
    <el-table-column prop="address" label="地址"> </el-table-column> -->
    <el-table-column
      v-for="(item, index) in tableHeader"
      :prop="item.prop"
      :label="item.label"
      :key="index"
    >
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      baseData: [], //第一列数据（写死）
      tableHeader: [],
      tableData: [],
      data: {
        //第一列之后的数据
        indId: [
          'IND000000000064097',
          'IND000000000064098',
          'IND000000000064099',
        ],
        origIndCName: [
          '食品饮料各品牌总计销售额',
          '食品饮料各品牌总计销售额',
          '食品饮料各品牌总计销售额',
        ],
        dataUpdateDate: [
          '2021-11-22 08:43:41',
          '2021-11-22 08:43:42',
          '2021-11-22 08:43:42',
        ],
        dataBeginDate: [
          '2018-01-01 00:00:00',
          '2018-01-01 00:00:00',
          '2018-01-01 00:00:00',
        ],
        indFrequency: ['MONTH', 'MONTH', 'MONTH'],
        sourceCName: ['全国连锁信息网', '全国连锁信息网', '全国连锁信息网'],
        indCName: [
          '食醋:恒顺:销售额',
          '食醋:食醋合计:销售额',
          '食醋:紫林:销售额',
        ],
        dataEndDate: [
          '2021-02-28 00:00:00',
          '2021-02-28 00:00:00',
          '2021-02-28 00:00:00',
        ],
        indUnit: ['万元', '万元', '万元'],
      },
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      let row0 = { title: '数据源' }
      let row1 = { title: '原子指标' }
      let row2 = { title: '派生指标名称' }
      let row3 = { title: '频率' }
      let row4 = { title: '单位' }
      let row5 = { title: '指标ID' }
      let row6 = { title: '起始时间' }
      let row7 = { title: '结束时间' }
      let row8 = { title: '更新时间' }
      this.baseData.push(row0, row1, row2, row3, row4, row5, row6, row7, row8)
      this.tableData = [...this.baseData] //渲染第一个内容数据
      this.tableHeader.push({ prop: 'title' }) //渲染第一个内容对应的表头
      // 第一列之后的数据
      this.getInds(this.data, 'sourceCName', row0)
      this.getInds(this.data, 'origIndCName', row1)
      this.getInds(this.data, 'indCName', row2)
      this.getInds(this.data, 'indFrequency', row3)
      this.getInds(this.data, 'indUnit', row4)
      this.getInds(this.data, 'indId', row5)
      this.getInds(this.data, 'dataBeginDate', row6)
      this.getInds(this.data, 'dataEndDate', row7)
      this.getInds(this.data, 'dataUpdateDate', row8)
    },
    getInds(res, key, row) {
      console.log('res', res, 'key', key, 'row', row)
      if (res[key]) {
        res[key].forEach((item, index) => {
          let col = 'col' + index
          row[col] = item
          if ('indCName' === key) {
            this.tableHeader.push({ prop: col })
          }
        })
      }
    },
  },
}
</script>

<style>
</style>