vue.js 前端分页原理

1，后台传给前端数据如下：

current_page:表示当前页；
data：表示数组数据；
last_page:表示最后一页；
per_page:表示当前页最多展示15条数据；
total:表示目前总数居；

2，前端请求下一页：
原理：点击下一页按钮，在原有的基础上，加多传递一个【下一页】参数给后台，数据再次更新即可。

第一次展示的页面

created () {
    // 【改善提案】设置必须条件
    let _this = this
    _this.role_level = localStorage.getItem('roleid') // 获取全局变量
    _this.deptid = localStorage.getItem('deptid') // 获取全局变量
    
    // params中append是必须给后台的数据
    var params = new URLSearchParams()
    params.append('company_id', this.company_id)
    params.append('token', localStorage.getItem('Authorization'))
    params.append('dept_id', localStorage.getItem('deptid'))
    // 获取所有信息
    axios.post('/ApiUrl?s=/api/proposal/getProposalList', params).then(res => {
      // console.log(res.data.data.list)
      _this.tableData = res.data.data.list.data // 设置all为基本参数
      _this.total = res.data.data.list.total // 设置all为基本参数
    })
  }

页码切换

    handleCurrentChange (currentpage) { // 页码切换
      // console.log(currentpage + 'currentpage')
      this.currentpage = currentpage
      let _this = this
      var params = new URLSearchParams()
      params.append('company_id', this.company_id)
      params.append('token', localStorage.getItem('Authorization'))
      params.append('dept_id', localStorage.getItem('deptid'))
      params.append('page', currentpage)  //传递一个页码参数
      // 获取所有打卡圈信息
      axios.post('/ApiUrl?s=/api/proposal/getProposalList', params).then(res => {
        // console.log(res.data.data.list)
        _this.tableData = res.data.data.list.data // 设置all为基本参数
      })
    }