Vue后臺管理系統(tǒng)怎么實現(xiàn)分頁功能

這篇文章主要介紹“Vue后臺管理系統(tǒng)怎么實現(xiàn)分頁功能”，在日常操作中，相信很多人在Vue后臺管理系統(tǒng)怎么實現(xiàn)分頁功能問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Vue后臺管理系統(tǒng)怎么實現(xiàn)分頁功能”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

具體如下：

效果圖：

功能描述：

• 顯示數(shù)據(jù)的總數(shù)目

• 可選擇每天的顯示條數(shù)

• 點擊頁碼跳轉(zhuǎn)到指定頁數(shù)

• 輸入頁碼可跳轉(zhuǎn)到指定頁

1.功能實現(xiàn)

1.1 結(jié)構(gòu)

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

1.2 邏輯

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

1.3 參數(shù)說明

1.4 效果演示

到此，關(guān)于“Vue后臺管理系統(tǒng)怎么實現(xiàn)分頁功能”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>