本文主要介紹了後臺管理系統之實現分頁功能，分享給大家，具體如下：

效果圖：

功能描述：

• 顯示資料的總數目
• 可選擇每天的顯示條數
• 點選頁碼跳轉到指定頁數
• 輸入頁碼可跳轉到指定頁

1.功能實現

1.1 結構

        <!-- 分頁 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pagenum"
          :page-sizes="[2,5,10,15]"
          :page-size="queryInfo.pagesize"
         www.cppcns.com
 
 layout="total,sizes,prev,pager,next,jumper"
          :total="total"
        >
        </el-pagination>

1.2 邏輯

    data() {
      return {
        //請求引數
        queryInfo: {
          type: 3,//當前頁數
          pagenum: 1,//指定當前頁數顯示的數目
          pagesize: 5,},goodsList: [],//總資料
        total: 0,}
    }
 
  methods: {
      //獲取商品分類資料
      async getGoodsCate() {
        const { data: res } = await this.$http.get("categories",{
 
          params: this.queryInfo,})
        if (res.meta.status !== 200) {
          this.$message.error("獲取引數失敗")
        }
        this.total = res.data.total
        this.goodsList = res.data.result
        //console.log(this.goodsList)
      },//監聽每頁的條數
      handleSizeChange(pagesize) {
        // console.loEsrkBuAgE
 
og(`每頁 ${val} 條`)
        this.queryInfo.pagesize = pagesize
        this.getGoodsCate()
      },//監聽當前頁數
      handleCurrentChange(pageNum) {
        this.queryInfo.pagenum = pageNum
www.cppcns.com        this.getGoodsCate()
      },

1.3 引數說明

1.4 效果演示

到此這篇關於Vue後臺管理系統之實現分頁功能示例的文章就介紹到這了,更多相關Vue 分頁 內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！