当前位置：首页 > VUE

vue实现垂直表格

2026-03-10 11:41:51VUE

实现垂直表格的基本思路

垂直表格通常指表头在左侧、数据向右展开的布局形式，与传统的水平表格（表头在上方）不同。Vue中可以通过动态渲染和CSS布局实现这种效果。

使用模板与v-for实现

通过嵌套v-for循环渲染行列，交换表头与数据的展示方向：

vue实现垂直表格

<template>
  <div class="vertical-table">
    <div v-for="(value, key) in tableData[0]" :key="key" class="row">
      <div class="header-cell">{{ key }}</div>
      <div v-for="item in tableData" :key="item[key]" class="data-cell">
        {{ item[key] }}
      </div>
    </div>
  </div>
</template>

数据格式示例

data() {
  return {
    tableData: [
      { name: '张三', age: 25, gender: '男' },
      { name: '李四', age: 30, gender: '女' }
    ]
  }
}

关键CSS样式

.vertical-table {
  display: flex;
  flex-direction: column;
}
.row {
  display: flex;
  border-bottom: 1px solid #eee;
}
.header-cell {
  width: 120px;
  padding: 8px;
  font-weight: bold;
  background: #f5f5f5;
}
.data-cell {
  padding: 8px;
  min-width: 100px;
}

动态表头处理

当数据结构可能变化时，建议提取独立表头数据：

computed: {
  headers() {
    return this.tableData.length > 0 
      ? Object.keys(this.tableData[0]) 
      : []
  }
}

响应式布局优化

添加媒体查询适应移动端：

vue实现垂直表格

@media (max-width: 768px) {
  .row {
    flex-direction: column;
  }
  .header-cell {
    width: 100%;
    border-bottom: 1px solid #ddd;
  }
}

使用组件库的替代方案

若使用Element UI等库，可通过调整表格样式实现：

<el-table :data="tableData" border style="width: 100%">
  <el-table-column 
    v-for="(col, index) in headers"
    :key="index"
    :prop="col"
    :label="col">
  </el-table-column>
</el-table>

通过CSS旋转或修改显示方向实现垂直效果。