分页实现的思路

代码：

代码逻辑的分析:

1.导入接口

import { sysRole } from '@/api/setting.js'

 

2.默认请求第1页,每页10条数据

   list: [],
      page: {
        page: 1, // 默认页码
        pagesize: 10, // 每页条数
        total: 100
      }

3.请求总体列表的数据

    // 获取列表
    async getData() {
      const res = await sysRole(this.page)
      // 存储分页总数
      this.page.total = res.data.total
      // 存储列表数据
      this.list = res.data.rows
      console.log(res, '角色列表')
    }

4.进来就调用

  created() {
    this.getData()
  },

假设数据有60条

5.页容量发生改变时候

 修改页容量

   handleSizeChange(size) {
      this.page.pagesize = size
      // 页容量回到第一页
      this.page.page = 1
      this.getData()
      console.log(size)
    },

假设改变的页容量是1

那么此时:

 改变页容量后最好回到第一页，在继续刷新列表。

      // 页容量回到第一页
      this.page.page = 1

否则可能会出现bug

6.页码发生改变

// 页码改变
    handleCurrentChange(page) {
      this.page.page = page
      this.getData()
      console.log(page)
    },

直接将改变的页码重新赋值。

 this.page.page = page

刷新列表的数据。

this.getData()