vue实现表头纵向

实现表头纵向的方法

使用Vue实现表头纵向可以通过CSS样式和表格结构调整来实现。以下是具体方法：

使用CSS transform属性旋转表头

通过CSS的transform属性将表头单元格旋转90度，使其纵向显示。这种方法适用于简单的表格布局。

<template>
  <table>
    <thead>
      <tr>
        <th v-for="header in headers" :key="header" class="vertical-header">
          {{ header }}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="row in rows" :key="row.id">
        <td v-for="header in headers" :key="header">
          {{ row[header] }}
        </td>
      </tr>
    </tbody>
  </table>
</template>

<style>
.vertical-header {
  transform: rotate(-90deg);
  transform-origin: left top;
  white-space: nowrap;
  height: 100px; /* 调整高度以适应旋转后的文本 */
  width: 30px;   /* 调整宽度以适应旋转后的文本 */
}
</style>

使用writing-mode属性

CSS的writing-mode属性可以改变文本的书写方向，适合实现纵向文本。

<template>
  <table>
    <thead>
      <tr>
        <th v-for="header in headers" :key="header" class="vertical-header">
          {{ header }}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="row in rows" :key="row.id">
        <td v-for="header in headers" :key="header">
          {{ row[header] }}
        </td>
      </tr>
    </tbody>
  </table>
</template>

<style>
.vertical-header {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  height: 100px;
  width: 30px;
}
</style>

调整表格结构

通过调整表格结构，将表头放在单独的列中，实现纵向显示。

<template>
  <table>
    <tr v-for="(row, index) in rowsWithHeader" :key="index">
      <th class="vertical-header">{{ row.header }}</th>
      <td>{{ row.value }}</td>
    </tr>
  </table>
</template>

<script>
export default {
  data() {
    return {
      headers: ['Header1', 'Header2', 'Header3'],
      rows: [
        { id: 1, Header1: 'Value1', Header2: 'Value2', Header3: 'Value3' },
        { id: 2, Header1: 'Value4', Header2: 'Value5', Header3: 'Value6' }
      ],
    };
  },
  computed: {
    rowsWithHeader() {
      return this.headers.map(header => ({
        header,
        value: this.rows.map(row => row[header]).join(', ')
      }));
    }
  }
};
</script>

<style>
.vertical-header {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}
</style>

注意事项

• 旋转文本可能会导致布局问题，需要调整单元格的高度和宽度以适应旋转后的文本。
• 使用writing-mode属性时，注意浏览器兼容性。
• 调整表格结构的方法适用于表头和内容一一对应的场景，灵活性较高。

以上方法可以根据具体需求选择适合的实现方式。