当前位置：首页 > VUE

vue实现表头纵向

2026-01-18 20:26:38VUE

实现表头纵向的常见方法

在Vue中实现表头纵向展示通常需要调整表格结构或使用CSS样式转换。以下是几种常见实现方式：

使用CSS transform属性旋转表头

通过CSS的transform属性将表头单元格旋转90度，实现纵向效果。

<template>
  <table>
    <thead>
      <tr>
        <th v-for="(header, index) in headers" :key="index" class="vertical-header">
          {{ header }}
        </th>
      </tr>
    </thead>
    <tbody>
      <!-- 表格内容 -->
    </tbody>
  </table>
</template>

<style>
.vertical-header {
  transform: rotate(-90deg);
  transform-origin: left top;
  white-space: nowrap;
  height: 150px; /* 根据内容调整 */
  width: 30px;   /* 根据内容调整 */
}
</style>

使用flex布局实现纵向排列

通过flex布局的flex-direction属性改变表头单元格内文字的排列方向。

<template>
  <th v-for="(header, index) in headers" :key="index" class="flex-header">
    <div class="header-content">{{ header }}</div>
  </th>
</template>

<style>
.flex-header {
  height: 120px; /* 根据需求调整 */
  display: flex;
  justify-content: center;
  align-items: center;
}

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

使用第三方表格组件

若使用element-ui或ant-design-vue等UI库，可利用其内置功能：

<template>
  <el-table :data="tableData">
    <el-table-column
      v-for="(header, index) in headers"
      :key="index"
      :prop="header.prop"
      :label="header.label">
      <template #header>
        <div class="vertical-text">{{ header.label }}</div>
      </template>
    </el-table-column>
  </el-table>
</template>

<style>
.vertical-text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  padding: 10px 0;
}
</style>