vue实现table表格分页

Vue 实现表格分页的方法

使用 Element UI 的分页组件

安装 Element UI 后，可以直接使用其提供的表格和分页组件。

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="日期"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData();
    },
    fetchData() {
      // 模拟 API 调用
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      this.tableData = this.allData.slice(start, end);
    }
  },
  created() {
    // 模拟数据
    this.allData = Array.from({ length: 100 }, (_, i) => ({
      date: `2023-01-${i + 1}`,
      name: `用户${i + 1}`
    }));
    this.total = this.allData.length;
    this.fetchData();
  }
}
</script>

自定义分页逻辑

如果不使用 UI 库，可以手动实现分页功能。

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>日期</th>
          <th>姓名</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in paginatedData" :key="item.name">
          <td>{{ item.date }}</td>
          <td>{{ item.name }}</td>
        </tr>
      </tbody>
    </table>
    <div class="pagination">
      <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
      <span>第 {{ currentPage }} 页</span>
      <button @click="nextPage" :disabled="currentPage === pageCount">下一页</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      totalItems: 100
    }
  },
  computed: {
    pageCount() {
      return Math.ceil(this.totalItems / this.pageSize);
    },
    paginatedData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.tableData.slice(start, end);
    }
  },
  methods: {
    prevPage() {
      this.currentPage--;
    },
    nextPage() {
      this.currentPage++;
    }
  },
  created() {
    // 模拟数据
    this.tableData = Array.from({ length: 100 }, (_, i) => ({
      date: `2023-01-${i + 1}`,
      name: `用户${i + 1}`
    }));
  }
}
</script>

使用 Vue 3 的 Composition API

在 Vue 3 中，可以使用 Composition API 实现分页逻辑。

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>日期</th>
          <th>姓名</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in paginatedData" :key="item.name">
          <td>{{ item.date }}</td>
          <td>{{ item.name }}</td>
        </tr>
      </tbody>
    </table>
    <div class="pagination">
      <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
      <span>第 {{ currentPage }} 页</span>
      <button @click="nextPage" :disabled="currentPage === pageCount">下一页</button>
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    const tableData = ref([]);
    const currentPage = ref(1);
    const pageSize = ref(10);
    const totalItems = ref(100);

    const pageCount = computed(() => Math.ceil(totalItems.value / pageSize.value));
    const paginatedData = computed(() => {
      const start = (currentPage.value - 1) * pageSize.value;
      const end = start + pageSize.value;
      return tableData.value.slice(start, end);
    });

    const prevPage = () => {
      if (currentPage.value > 1) currentPage.value--;
    };
    const nextPage = () => {
      if (currentPage.value < pageCount.value) currentPage.value++;
    };

    // 模拟数据
    tableData.value = Array.from({ length: 100 }, (_, i) => ({
      date: `2023-01-${i + 1}`,
      name: `用户${i + 1}`
    }));

    return {
      tableData,
      currentPage,
      pageSize,
      totalItems,
      pageCount,
      paginatedData,
      prevPage,
      nextPage
    };
  }
}
</script>

注意事项

• 分页逻辑的核心是计算当前页的数据范围，通常使用 slice 方法截取数组。
• 在实际项目中，数据通常来自后端 API，需要在分页变化时重新请求数据。
• 分页组件应提供足够的用户反馈，例如禁用按钮、显示总页数等。