vue 实现表格分页

Vue 实现表格分页的方法

使用 Element UI 的分页组件

Element UI 提供了现成的分页组件 el-pagination，结合 el-table 可以快速实现表格分页功能。

安装 Element UI：

npm install element-ui

在 Vue 文件中引入组件：

import { ElTable, ElPagination } from 'element-ui';

模板部分：

<template>
  <div>
    <el-table :data="currentPageData" border>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" 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>

脚本部分：

export default {
  data() {
    return {
      tableData: [], // 全部数据
      currentPageData: [], // 当前页数据
      currentPage: 1,
      pageSize: 10,
      total: 0
    };
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.updateCurrentPageData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.updateCurrentPageData();
    },
    updateCurrentPageData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      this.currentPageData = this.tableData.slice(start, end);
    }
  },
  created() {
    // 模拟获取数据
    this.tableData = Array.from({ length: 100 }, (_, i) => ({
      name: `用户${i + 1}`,
      age: Math.floor(Math.random() * 50) + 18
    }));
    this.total = this.tableData.length;
    this.updateCurrentPageData();
  }
};

手动实现分页功能

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

模板部分：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in currentPageData" :key="item.id">
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
        </tr>
      </tbody>
    </table>
    <div class="pagination">
      <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
      <span>第 {{ currentPage }} 页</span>
      <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
    </div>
  </div>
</template>

脚本部分：

export default {
  data() {
    return {
      tableData: [],
      currentPageData: [],
      currentPage: 1,
      pageSize: 10,
      totalPages: 0
    };
  },
  methods: {
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
        this.updateCurrentPageData();
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
        this.updateCurrentPageData();
      }
    },
    updateCurrentPageData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      this.currentPageData = this.tableData.slice(start, end);
    }
  },
  created() {
    this.tableData = Array.from({ length: 100 }, (_, i) => ({
      id: i + 1,
      name: `用户${i + 1}`,
      age: Math.floor(Math.random() * 50) + 18
    }));
    this.totalPages = Math.ceil(this.tableData.length / this.pageSize);
    this.updateCurrentPageData();
  }
};

样式部分：

table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px;
}
.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

使用 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 currentPageData" :key="item.id">
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
        </tr>
      </tbody>
    </table>
    <div class="pagination">
      <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
      <span>第 {{ currentPage }} 页</span>
      <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
    </div>
  </div>
</template>

脚本部分：

import { ref, computed, onMounted } from 'vue';

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

    const currentPageData = 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 < totalPages.value) {
        currentPage.value++;
      }
    };

    onMounted(() => {
      tableData.value = Array.from({ length: 100 }, (_, i) => ({
        id: i + 1,
        name: `用户${i + 1}`,
        age: Math.floor(Math.random() * 50) + 18
      }));
      totalPages.value = Math.ceil(tableData.value.length / pageSize.value);
    });

    return {
      tableData,
      currentPage,
      pageSize,
      totalPages,
      currentPageData,
      prevPage,
      nextPage
    };
  }
};

以上方法提供了不同场景下的表格分页实现方案，可以根据项目需求选择合适的方式。