android短視訊開發，後臺各個管理頁面的分頁管理

android短視訊開發，後臺各個管理頁面的分頁管理

1.結構

        <!-- 分頁 -->
        <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>

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.log(`每頁 ${val} 條`)
        this.queryInfo.pagesize = pagesize
        this.getGoodsCate()
      },
      //監聽當前頁數
      handleCurrentChange(pageNum) {
        this.queryInfo.pagenum = pageNum
        this.getGoodsCate()
      },
    },

以上就是android短視訊開發，後臺各個管理頁面的分頁管理， 更多內容歡迎關注之後的文章