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爲基本參數
      })
    }