Vue2 实现前端分页 使用Element-ui 后端返回数据没有字段 以及后端有字段实现分别实现分页

后端如果一次给你返回很多数据 那么浏览器会卡 那么要实现分页 也是属于性能优化的一种 

比如把一万条数据 显示成每页10 条或者更多. 不会引起阻塞

每次点击的时候给后端传入字段  在联调的时候 要划分好责任 看后端有没有给你字段 还是要你自己实现 不过大部分都是后端给的字段 也是必须的  就是每次用户点击的时候在去请求数据 每次请求多少条

1.这个是前端分页 后端分页在下面

1.使用element-ui 的分页组件

分页

    <span class="demonstration">完整功能</span>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"  // 页码
      :page-sizes="[100, 200, 300, 400]"  // 按照多少条开始显示 可以写小一点
      :page-size="pageSize"  // 每页多少条 不要写死
      layout="total, sizes, prev, pager, next, jumper" // 分页的一些功能 样式
      :total="total"> // 返回的数据长度
    </el-pagination>

page-size

每页显示条目个数，支持 .sync 修饰符

current-page

当前页数，支持 .sync 修饰符

total

总条目数

number

—

2.在分页组件里面的data 里面开始写需要的数据

  data() {
    return {
      total: 0, // 总条数
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页条数
    }
  },

3.开始编写分页 逻辑  

已经定义了事件 那么会把需要的参数传进来  

第一段代码编写的 是每页显示多少条数据 传进来这个数值 

比如你选中 每页显示20 那么就会传进来 然后选玩以后 默认跳到第一页开始

第二段代码就是你点击分页的时候 传进来的页码 点击1 传进来1 这样的

为什么要这两个数据 因为我们后面要实现截取数据需要这两个数据

    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1 // 默认跳到第一页
    },
    // 当前第几页
    handleCurrentChange(val) {
      this.currentPage = val
    },

4. 最后实现使用计算属性

可以看到下面代码 计算属性 我们就不说了 多个值影响一个值 

这个this.infoaAll是数据 也就是后端一次性给我返回的数据 假如是100 条数据存进去 然后我们使用数组的方法进行截取slice(下标，下标) 

this.currentPage 是我们data 里面声明的默认值 是第一页 然后要减一 可以看我下面的是有规律的

1-10 代表展示10 条数据  那么对应的下标就是0-9 以此类推 从哪里开始截取 x 每页的条数 

结束截取就不需要减一了直接用页码 乘 每页的条数 就是截取结束的下标

比如

（传进来的页码1-1）*每页的条数10 ，1*每页的条数10 

那么截取后的结果就是 0，10

我感觉很清楚了 有不明白的小伙伴 在多看看 

如果渲染页面那么一定要拿计算属性去渲染 currentInfoALL

    // 分页逻辑
    currentInfoALL() {
      //  1-10 --- 0-9
      //  11-20  10--19
      return this.InfoALL.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
    }

效果图

 

 2.后端分页

老样子定义数据

   tableData: [],
      total: 0,
      page: 1, // 当前页数
      size: 10 // 每页条数

2.调用接口过后端传参数 仔细看 我这个挺好理解的 

先结构出来需要的数据   然后传进去参数 对应data 里面的数据

    async workAll() {
      const {
        data: { status, message, total, data: res }
      } = await worksAPI({ page: this.page, size: this.size })
      if (status !== 200) return this.$message.error(message)
      this.tableData = res
      this.total = total
      this.tableData.forEach((item) => {
        item.completed_text = item.completed ? '已完成' : '未完成'
      })
    },

3.定义事件 传参  然后一定要调用那个接口 this.woekAll() 因为点击一次 要请求数据

    // 每页显示条数
    handleSizeChange(val) {
      this.size = val
      this.workAll()
    },
    // 第几页
    handleCurrentChange(val) {
      this.page = val
      this.workAll()
    }

你也来试一试吧 很简单哦