Vue分页

下面是对分页功能的整理，希望可以帮助到有需要的小伙伴~

分页样式

分页样式是使用element-ui实现的，使用element-ui中的组件的时候要提前引用

<!-- 分页区域 -->
      <!-- data() 的 queryInfo值 有 pagenum、pagesize 可以用来表示分页数据
        // 当前的页数
        pagenum: 1,
        // 当前每页显示多少条数据
        pagesize: 2, 
      -->
      <!-- size-change方法 -- 切换煤业显示多少条数据 -->
      <!-- page-size 每页显示的数据（可选） -->
      <!-- page-size 【当前页】显示多少条数据 -->
      <!-- layout 页面上显示的分页布局 -->
      <!-- total 总共有多少条数据 -->

      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>

分页方法

<script>
export default{
// 数据
  data() {
  	return {
      // 获取用户列表的参数对象
      queryInfo: {
        query: '',
        // 当前的页数
        pagenum: 1,
        // 当前每页显示多少条数据
        pagesize: 2,
      },
      // 如果 取用户列表数据 成功
      // userlist 存储的用户数据
      // total  数据的总条数

      userlist: [],
      total: 0,
      editDialogVisible: false,
      // 查询到的用户信息对象
      editForm: {},
  },
  // 生命周期函数
  // 在生命周期函数中，发起当前的 获取用户列表数据请求
  created() {
    this.getUserList()
  },
  methods: {
  // 获取用户列表数据请求 的 方法
    async getUserList() {
      // users 是 请求路径
      // {params:{}} 是 get请求 携带的参数
      // 把 携带的参数 放到 data()中 比较好
      // 异步请求会返回一个data属性，{data: res} 把data属性重命名为res
      const { data: res } = await this.$http.get('users', {
        params: this.queryInfo,
      })
      // 如果 获取用户列表数据 失败
      if (res.meta.status !== 200) {
        return this.$message.error('获取用户列表失败！')
      }
      // 给 userlist 赋值
      this.userlist = res.data.users
      // 给 total 赋值
      this.total = res.data.total
      // 输出 用户列表数据
      console.log(res)
    }

  	handleSizeChange(newSize) {
      // 监听 pagesize 改变的事件
      // console.log(newSize)
      this.queryInfo.pagesize = newSize
      this.getUserList()
    },
    
    // 监听页码值 改变的事件
    handleCurrentChange(newPage) {
      this.queryInfo.pagenum = newPage
      this.getUserList()
    }
  }

}
</script>