vue结合elmentui实现前端分页

1.首先需要明确的事情是，前端分页是由于后端的数据并没有进行分页，后端会将全部数据返给前端，而前端要做的就是在前端进行前端分页，避免数据过大，造成加载卡顿，用户流失。

2.正式开始：

data数据总览：

data() {
    return {
      imglist: [], //总图片列表
      litterimglist: [], //分页图片列表
      total: "", //图片总数
      page: 1, //页数
      pagesize: 5, //每页展示的图片数量
      url: "http://127.0.0.1",//请求地址
    }
  },

2.1通过请求获取全部数据列表

//获取所有图片列表
    async getAllImg() {
      const { data: res } = await this.$axios.get(this.url + "/api/img")//axios请求
      if (res.status !== 0) return this.$message.error("获取图片列表失败")
      this.imglist = res.data//获取全部图片数据列表成功，将其存到总图片列表imglist中
      this.total = res.data.length//将图片总数据条数存到total中
      this.getPassImg()//调用图片分页函数
    },

2.2分页请求数据列表函数

//分页请求数据列表
//通过对原图片数据列表进行拆分，从而实现分页显示
    getPassImg() {
      this.litterimglist = this.imglist.slice(
        (this.page - 1) * this.pagesize,
        this.page * this.pagesize
      )
    },

2.3引入elmentui的分页组件

<el-pagination
          @size-change="handleSizeChange"//改变事件
          @current-change="handleCurrentChange"//改变事件
          :current-page="page"//当前页数
          :page-sizes="[5, 10, 15, 20]"
          :page-size="5"//每页显示多少
          layout="total, sizes, prev, pager, next, jumper"//组件样式
          :total="total"//总条数
        >
        </el-pagination>

2.4事件函数

//点击每页显示多少条
    handleSizeChange(val) {
      this.pagesize = val//将每页显示多少天的值赋给每页条数
      this.getPassImg()//调用获取分页图片函数获取新值
    },
    //点击对应页数修改条数
    handleCurrentChange(val) {
      this.page = val//将当前页数赋值给page
      this.getPassImg()//调用获取分页图片函数获取新值
    },

3.大功告成。