当前位置：首页 > VUE

vue实现横向表格

2026-02-18 03:16:01VUE

Vue 实现横向表格的方法

横向表格通常指数据以行为单位横向展示，列头可能固定或动态生成。以下是几种实现方式：

使用原生表格结构

通过 v-for 循环生成行和列，适合静态表头或简单数据。

<template>
  <table>
    <thead>
      <tr>
        <th v-for="(header, index) in headers" :key="index">{{ header }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, rowIndex) in rows" :key="rowIndex">
        <td v-for="(cell, cellIndex) in row" :key="cellIndex">{{ cell }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      headers: ['姓名', '年龄', '城市'],
      rows: [
        ['张三', 25, '北京'],
        ['李四', 30, '上海']
      ]
    };
  }
};
</script>

动态表头与数据绑定

适用于表头和数据均从后端动态获取的场景。

vue实现横向表格

<template>
  <table>
    <thead>
      <tr>
        <th v-for="header in dynamicHeaders" :key="header.key">{{ header.label }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in dynamicData" :key="item.id">
        <td v-for="header in dynamicHeaders" :key="header.key">{{ item[header.key] }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      dynamicHeaders: [
        { key: 'name', label: '姓名' },
        { key: 'age', label: '年龄' }
      ],
      dynamicData: [
        { id: 1, name: '王五', age: 28 },
        { id: 2, name: '赵六', age: 22 }
      ]
    };
  }
};
</script>

使用 CSS 实现横向滚动

当列数过多时，可通过 CSS 强制横向布局并添加滚动条。

<template>
  <div class="horizontal-scroll">
    <table>
      <!-- 同上结构 -->
    </table>
  </div>
</template>

<style>
.horizontal-scroll {
  overflow-x: auto;
  white-space: nowrap;
}
</style>

结合第三方组件库

若需复杂功能（如固定列、排序），推荐使用现成组件：

vue实现横向表格

Element UI：<el-table> 支持横向滚动和固定列。
Vuetify：<v-data-table> 提供动态列和响应式布局。
Ant Design Vue：<a-table> 支持列配置和自定义渲染。

示例（Element UI）：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
  </el-table>
</template>

响应式横向表格

通过媒体查询或 Flexbox 实现小屏幕适配：

@media (max-width: 600px) {
  table {
    display: flex;
    overflow-x: auto;
  }
  tr {
    display: flex;
    flex-direction: column;
    min-width: 120px;
  }
}