当前位置：首页 > VUE

vue实现纵向表格

2026-01-19 22:34:54VUE

实现纵向表格的方法

在Vue中实现纵向表格，可以通过调整数据结构和模板渲染方式来实现。纵向表格的特点是表头在左侧，数据向右展开，与传统的横向表格不同。

使用v-for嵌套渲染

通过嵌套使用v-for指令，可以灵活地渲染纵向表格。需要将数据结构调整为适合纵向展示的形式。

<template>
  <table>
    <tr v-for="(row, index) in tableData" :key="index">
      <th>{{ row.label }}</th>
      <td v-for="(value, i) in row.values" :key="i">{{ value }}</td>
    </tr>
  </table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { label: '姓名', values: ['张三', '李四', '王五'] },
        { label: '年龄', values: [25, 30, 28] },
        { label: '职业', values: ['工程师', '设计师', '产品经理'] }
      ]
    }
  }
}
</script>

使用CSS旋转表格

另一种方法是创建常规表格后，通过CSS transform属性旋转整个表格，实现纵向显示效果。

<template>
  <div class="vertical-table">
    <table>
      <tr>
        <th>项目</th>
        <td>姓名</td>
        <td>年龄</td>
        <td>职业</td>
      </tr>
      <tr>
        <th>数据1</th>
        <td>张三</td>
        <td>25</td>
        <td>工程师</td>
      </tr>
      <tr>
        <th>数据2</th>
        <td>李四</td>
        <td>30</td>
        <td>设计师</td>
      </tr>
    </table>
  </div>
</template>

<style>
.vertical-table {
  transform: rotate(-90deg);
  transform-origin: top left;
  position: absolute;
  top: 100%;
  left: 0;
}
</style>

使用flex布局实现

flex布局可以更灵活地控制表格的排列方向，适合实现纵向表格布局。

<template>
  <div class="vertical-flex-table">
    <div class="row" v-for="(row, index) in tableData" :key="index">
      <div class="header">{{ row.label }}</div>
      <div class="cell" v-for="(value, i) in row.values" :key="i">{{ value }}</div>
    </div>
  </div>
</template>

<style>
.vertical-flex-table {
  display: flex;
  flex-direction: column;
}
.vertical-flex-table .row {
  display: flex;
}
.vertical-flex-table .header {
  font-weight: bold;
  min-width: 100px;
}
.vertical-flex-table .cell {
  min-width: 80px;
}
</style>

动态生成纵向表格

对于动态数据，可以先将横向数据转换为纵向结构，再渲染表格。

// 将横向数据转换为纵向数据
function transformToVertical(horizontalData) {
  const verticalData = [];
  const keys = Object.keys(horizontalData[0]);

  keys.forEach(key => {
    verticalData.push({
      label: key,
      values: horizontalData.map(item => item[key])
    });
  });

  return verticalData;
}

使用第三方组件库

一些UI组件库如Element UI、Ant Design Vue等提供了灵活的表格组件，可以通过配置实现纵向表格效果。

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="label" label="项目" width="180"></el-table-column>
    <el-table-column v-for="(value, index) in tableData[0].values" 
                     :key="index" 
                     :label="'数据' + (index+1)">
      <template #default="scope">
        {{ scope.row.values[index] }}
      </template>
    </el-table-column>
  </el-table>
</template>

以上方法可以根据具体需求选择使用，每种方法都有其适用场景和优缺点。

vue实现纵向表格