Vue バックエンド管理システムのページング機能の実装例

        <!-- ページネーション -->
        <el-ページネーション
          @size-change="ハンドルサイズ変更"
          @current-change="現在の変更を処理する"
          :current-page="クエリ情報ページ番号"
          :ページサイズ="[2, 5, 10, 15]"
          :page-size="クエリ情報ページサイズ"
          layout="total, sizes, prev, pager, next, jumper"
          :total="合計"
        >
        </el-pagination>

    データ（） {
      戻る {
        //リクエストパラメータ queryInfo: {
          タイプ: 3,
          //現在のページ番号 pagenum: 1,
          //表示されるページ数を指定します pagesize: 5,
        },
        商品リスト: [],
        //合計データ合計: 0,
      }
    }
 
  メソッド: {
      //商品分類データを取得する async getGoodsCate() {
        const { data: res } = this.$http.get("categories", { を待ちます。
          パラメータ: this.queryInfo、
        })
        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 = ページサイズ
        this.getGoodsCate()
      },
      //現在のページ番号を監視する handleCurrentChange(pageNum) {
        this.queryInfo.pagenum = ページ番号
        this.getGoodsCate()
      },
    },