当前位置：首页 > VUE

vue实现表格

2026-01-06 23:30:06VUE

Vue 实现表格的方法

在 Vue 中实现表格可以通过多种方式完成，以下是几种常见的方法：

使用原生 HTML 表格

Vue 可以直接渲染原生 HTML 表格，通过 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="(value, key) in row" :key="key">{{ value }}</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>

使用第三方组件库

Vue 生态中有许多成熟的表格组件库，例如 Element UI、Vuetify 或 Ant Design Vue。

以 Element UI 为例：

<template>
  <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>
</template>

<script>
export default {
  data() {
    return {
      rows: [
        { id: 1, name: 'Alice', age: 25 },
        { id: 2, name: 'Bob', age: 30 },
      ],
    };
  },
};
</script>

自定义表格组件

如果需要更复杂的表格功能，可以封装一个自定义表格组件。

<template>
  <div>
    <table>
      <thead>
        <slot name="header" :headers="headers"></slot>
      </thead>
      <tbody>
        <slot name="body" :rows="rows"></slot>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  props: {
    headers: Array,
    rows: Array,
  },
};
</script>

动态表格与分页

结合分页功能实现动态加载数据。

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th v-for="header in headers" :key="header">{{ header }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="row in paginatedRows" :key="row.id">
          <td v-for="(value, key) in row" :key="key">{{ value }}</td>
        </tr>
      </tbody>
    </table>
    <div>
      <button @click="prevPage">Previous</button>
      <span>Page {{ currentPage }}</span>
      <button @click="nextPage">Next</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      headers: ['ID', 'Name', 'Age'],
      rows: [
        { id: 1, name: 'Alice', age: 25 },
        { id: 2, name: 'Bob', age: 30 },
        // More rows...
      ],
      currentPage: 1,
      rowsPerPage: 5,
    };
  },
  computed: {
    paginatedRows() {
      const start = (this.currentPage - 1) * this.rowsPerPage;
      const end = start + this.rowsPerPage;
      return this.rows.slice(start, end);
    },
  },
  methods: {
    prevPage() {
      if (this.currentPage > 1) this.currentPage--;
    },
    nextPage() {
      if (this.currentPage * this.rowsPerPage < this.rows.length) this.currentPage++;
    },
  },
};
</script>