vue+elemui 前端分页

Vue + Element UI 的前端分页通常是在数据列表展示中实现的，Element UI 提供了非常方便的 Pagination 组件来处理分页功能。在 Vue 中，你可以这样做：

1. 引入依赖：首先需要安装 Element UI 和其对应的分页组件，通过npm或yarn安装：

npm install element-ui
// 或者
yarn add element-ui

2. 配置引入：在 Vue 文件中导入 Pagination 组件和其他需要的样式：

import { Pagination } from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

3. 在模板中使用：在显示数据列表的地方，创建一个分页控件并绑定到实际的数据和当前页数上：

<template>
  <div>
    <el-pagination
      :total="totalData" // 总数据量
      :current-page="currentPage" // 当前页码
      @current-change="handleCurrentChange" // 分页事件处理器
      layout="total, sizes, prev, pager, next, jumper" // 设置布局
    ></el-pagination>
    <!-- 使用 v-for 渲染数据 -->
    <ul>
      <li v-for="(item, index) in itemsPerPage" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      totalData: 0,
      currentPage: 1, // 初始页码
      itemsPerPage: [], // 根据当前页获取的数据数组
    };
  },
  computed: {
    itemsPerPage() {
      const perPage = this.$options.perPage; // 可能从配置或路由参数获取每页数量
      return this.totalData ? Math.ceil(this.totalData / perPage) : [];
    },
  },
  methods: {
    handleCurrentChange(page) {
      this.currentPage = page;
      // 更新数据，例如从服务器拉取新的一页数据
      this.fetchData(page);
    },
    fetchData(page) {
      // 实现异步请求，返回 Promise，解决分页后的数据更新
    },
  },
};
</script>

4. 动态数据加载：在`fetchData`方法中，你需要根据当前页码从服务器获取数据，并更新`itemsPerPage`。