纵向el-table表格_实现el-table表头纵向显示效果

一、实现效果：

        表头纵向的el-table表格，每个内容的单元格长度为30px，单元格不足6格的补足6格空格，超出6格的用实际内容填充。

二、实现方式：

a、数据结构调整:

• 通常表格数据是以列为主，每列对应一个字段。为了实现纵向表头，需要将数据结构调整为以行为主，具体来说，每行对应一个表头（例如 "工厂焊(A)"，"现场焊(M)" 等），然后在每一行中填充列数据。
• 每行的数据可以以对象的形式定义，label 表示纵向表头的名称，values 数组表示该表头下的列数据。

b、动态生成列:

• 使用 el-table-column 标签，通过 v-for 动态生成列，并根据行数据的 values 数组进行填充。
• 这里的关键是 v-for 的应用：通过遍历 values 数组生成多列，每一列的数据来源于 values 的不同索引。

代码实现：

<template>
  <div style="width: 300px; font-size: 12px;">
    <el-table
      :data="processedTableData"
      border
      :show-header="false"
      class="custom-table"
    >
      <el-table-column
        prop="label"
        width="120"
      >
        <template slot-scope="scope">
          {{ scope.row.label }}
        </template>
      </el-table-column>
      <el-table-column
        v-for="(item, index) in rowLength"
        :key="index"
        width="30"
      >
        <template slot-scope="scope">
          {{ scope.row.values[index] !== undefined ? scope.row.values[index] : '' }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      rowLength: 0,
      tableData: [
        {
          label: "工厂焊(A)",
          values: Array(5).fill('')
        },
        {
          label: "现场焊(M)",
          values: [4, 5, 6]
        },
        {
          label: "现场调整焊(F)",
          values: [7, 8, 9, 9]
        }
      ]
    };
  },
  computed: {
    processedTableData() {
      return this.tableData.map(row => {
        while (row.values.length < this.rowLength) {
          row.values.push('');
        }
        return row;
      });
    }
  },
  mounted() {
    // 放在请求到tableData数据后
    const maxValuesLength = Math.max(
      ...this.tableData.map(row => row.values.length)
    );
    this.rowLength = maxValuesLength > 6 ? maxValuesLength : 6;
    console.log(this.tableData[0].values, 'tableData---');
  }
};
</script>