当前位置：首页 > VUE

实现vue table

2026-02-10 06:10:14VUE

使用 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 data" :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'],
      data: [
        { id: 1, name: 'Alice', age: 25 },
        { id: 2, name: 'Bob', age: 30 }
      ]
    };
  }
};
</script>

动态数据加载

结合 API 请求动态加载表格数据，通常使用 axios 或 fetch。

<template>
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="user in users" :key="user.id">
        <td>{{ user.id }}</td>
        <td>{{ user.name }}</td>
        <td>{{ user.email }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      users: []
    };
  },
  async created() {
    const response = await axios.get('https://jsonplaceholder.typicode.com/users');
    this.users = response.data;
  }
};
</script>

分页功能

通过计算属性实现分页逻辑，控制每页显示的数据量。

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in paginatedData" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
        </tr>
      </tbody>
    </table>
    <button @click="prevPage" :disabled="currentPage === 1">Previous</button>
    <span>Page {{ currentPage }} of {{ totalPages }}</span>
    <button @click="nextPage" :disabled="currentPage === totalPages">Next</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [
        { id: 1, name: 'Alice' },
        { id: 2, name: 'Bob' },
        { id: 3, name: 'Charlie' },
        { id: 4, name: 'David' }
      ],
      currentPage: 1,
      itemsPerPage: 2
    };
  },
  computed: {
    paginatedData() {
      const start = (this.currentPage - 1) * this.itemsPerPage;
      const end = start + this.itemsPerPage;
      return this.data.slice(start, end);
    },
    totalPages() {
      return Math.ceil(this.data.length / this.itemsPerPage);
    }
  },
  methods: {
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
      }
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    }
  }
};
</script>

排序功能

通过点击表头实现升序或降序排列。

<template>
  <table>
    <thead>
      <tr>
        <th @click="sort('id')">ID</th>
        <th @click="sort('name')">Name</th>
        <th @click="sort('age')">Age</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="row in sortedData" :key="row.id">
        <td>{{ row.id }}</td>
        <td>{{ row.name }}</td>
        <td>{{ row.age }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      data: [
        { id: 1, name: 'Alice', age: 25 },
        { id: 2, name: 'Bob', age: 30 },
        { id: 3, name: 'Charlie', age: 20 }
      ],
      sortKey: 'id',
      sortOrder: 1 // 1 for ascending, -1 for descending
    };
  },
  computed: {
    sortedData() {
      return [...this.data].sort((a, b) => {
        if (a[this.sortKey] < b[this.sortKey]) return -1 * this.sortOrder;
        if (a[this.sortKey] > b[this.sortKey]) return 1 * this.sortOrder;
        return 0;
      });
    }
  },
  methods: {
    sort(key) {
      if (this.sortKey === key) {
        this.sortOrder *= -1;
      } else {
        this.sortKey = key;
        this.sortOrder = 1;
      }
    }
  }
};
</script>

使用第三方库

对于复杂表格需求，可以使用成熟的第三方库如 Element UI、Vuetify 或 ag-Grid。

以 Element UI 为例：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="Date" width="180"></el-table-column>
    <el-table-column prop="name" label="Name" width="180"></el-table-column>
    <el-table-column prop="address" label="Address"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2023-01-01', name: 'Alice', address: 'New York' },
        { date: '2023-01-02', name: 'Bob', address: 'London' }
      ]
    };
  }
};
</script>