el-table表头和内容在一行

在Element UI的`el-table`组件中，如果你想要将表头和部分内容放在同一条行上，可以使用`span-method`属性结合自定义的`render-header`函数。`span-method`允许你在渲染单元格时控制每个单元格的宽度分配。

例如，你可以创建一个自定义的渲染函数，检查当前列是否需要合并，如果是表头，则显示整个单元格作为标题，如果是其他列则只显示部分内容。这是一种常见的做法来实现“表头+值”的组合：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column type="index"></el-table-column>
    <template v-for="(column, index) in tableColumns">
      <el-table-column
        :key="column"
        :prop="column.prop"
        :label="getHeader(column.prop)"
        :span-method="handleSpanMethod(index)"
      >
        <template slot-scope="scope">
          {{ scope.row[column.prop] }}
        </template>
      </el-table-column>
    </template>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: ...,
      tableColumns: [
        // 表头列...
      ]
    };
  },
  methods: {
    handleSpanMethod(columnIndex) {
      if (this.isHeaderColumn(columnIndex)) {
        // 当前是表头列
        return { colspan: this.tableColumns.length };
      } else {
        // 其他列
        return { colspan: 1 };
      }
    },
    getHeader(prop) {
      // 根据prop获取表头文本
      // 这里假设你有一个映射对象或数组将字段名转换为表头文本
      return this.headerMap[prop];
    },
    isHeaderColumn(index) {
      // 判断当前索引是否对应表头
      // 可能通过检查数据结构或特定列标识符来实现
    }
  }
};
</script>