当前位置：首页 > VUE

vue实现纵向表格

2026-02-20 14:39:19VUE

实现纵向表格的基本思路

纵向表格即表头在左侧、数据向右展开的布局，可通过调整HTML结构和CSS样式实现。Vue中结合动态数据绑定可高效完成此类需求。

基础HTML结构

使用<table>标签构建，通过v-for循环生成行列。关键是将表头作为第一列而非第一行：

<table class="vertical-table">
  <tr v-for="(row, index) in tableData" :key="index">
    <th>{{ row.header }}</th>
    <td v-for="(cell, cellIndex) in row.data" :key="cellIndex">
      {{ cell }}
    </td>
  </tr>
</table>

Vue数据示例

数据格式应为对象数组，每个对象包含表头字段和数据数组：

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

关键CSS样式

通过CSS控制表格方向，注意边框和对齐方式：

.vertical-table {
  border-collapse: collapse;
  width: auto;
}
.vertical-table th {
  background-color: #f5f5f5;
  text-align: right;
  padding: 8px 12px;
  border: 1px solid #ddd;
}
.vertical-table td {
  padding: 8px 12px;
  border: 1px solid #ddd;
}

动态列扩展方案

当需要动态增加列时，可通过方法更新数据：

methods: {
  addColumn() {
    this.tableData.forEach(row => {
      row.data.push('新数据');
    });
  }
}

响应式适配

结合媒体查询实现移动端适配：

@media (max-width: 768px) {
  .vertical-table {
    display: block;
  }
  .vertical-table tr {
    display: flex;
    flex-direction: column;
  }
}

使用组件化封装

对于复杂场景，可封装为可复用组件：

<template>
  <div>
    <slot name="header"></slot>
    <table class="vertical-table">
      <!-- 表格内容 -->
    </table>
  </div>
</template>

<script>
export default {
  props: ['rows'],
  // 组件逻辑
}
</script>

vue实现纵向表格