当前位置：首页 > VUE

vue横纵表格实现

2026-02-21 09:32:01VUE

Vue 横向与纵向表格实现

横向表格（常规表格）

横向表格是最常见的表格形式，数据按行展示。在 Vue 中可以通过 v-for 动态渲染表格内容。

<template>
  <table>
    <thead>
      <tr>
        <th v-for="header in headers" :key="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>

<script>
export default {
  data() {
    return {
      headers: ['ID', 'Name', 'Age'],
      rows: [
        { id: 1, Name: 'Alice', Age: 25 },
        { id: 2, Name: 'Bob', Age: 30 }
      ]
    }
  }
}
</script>

纵向表格（转置表格）

纵向表格将表头和数据列互换显示，适用于字段较少但数据项较多的场景。

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

<script>
export default {
  data() {
    return {
      headers: ['ID', 'Name', 'Age'],
      rows: [
        { id: 1, Name: 'Alice', Age: 25 },
        { id: 2, Name: 'Bob', Age: 30 }
      ]
    }
  }
}
</script>

使用组件库实现

对于更复杂的表格需求，可以使用现成的 UI 组件库：

Element UI 表格组件

<el-table :data="rows">
<el-table-column prop="id" label="ID"></el-table-column>
<el-table-column prop="Name" label="Name"></el-table-column>
<el-table-column prop="Age" label="Age"></el-table-column>
</el-table>

Vuetify 数据表格

<v-data-table :headers="headers" :items="rows"></v-data-table>

响应式表格处理

当表格内容过多时，可以添加滚动条或分页功能：

<div style="overflow-x: auto;">
  <table>...</table>
</div>

<!-- 或者使用分页 -->
<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="currentPage"
  :page-sizes="[10, 20, 50]"
  :page-size="pageSize"
  layout="total, sizes, prev, pager, next, jumper"
  :total="totalItems">
</el-pagination>

表格样式优化

通过 CSS 可以增强表格的可读性和美观度：

vue横纵表格实现

table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}
th {
  background-color: #f2f2f2;
}
tr:nth-child(even) {
  background-color: #f9f9f9;
}

以上方法涵盖了 Vue 中实现横向和纵向表格的基本方案，可以根据实际需求选择合适的实现方式。对于复杂场景，建议使用成熟的 UI 组件库以节省开发时间。