并不建議把請(qǐng)求封裝在分頁(yè)組件里面，各大主流UI框架都有現(xiàn)成的分頁(yè)組件了，向后端請(qǐng)求無非就是用到分頁(yè)組件的當(dāng)前請(qǐng)求頁(yè)current-page及每頁(yè)請(qǐng)求條目個(gè)數(shù) page-size ，頁(yè)面監(jiān)聽到組件這2個(gè)屬性變更就重新提交請(qǐng)求，邏輯很清晰。
你要是把請(qǐng)求封裝在分頁(yè)組件里面，要把請(qǐng)求方法當(dāng)參數(shù)傳進(jìn)去吧，組件還得能接受請(qǐng)求額外參數(shù)吧，要提供手動(dòng)請(qǐng)求接口吧，請(qǐng)求回調(diào)后又要從分頁(yè)組件里面拿回調(diào)吧？這個(gè)可以實(shí)現(xiàn)，但總感覺邏輯不對(duì)

以element-ui為例 截取一段我的實(shí)現(xiàn)方法

<el-pagination
    @size-change="tableSizeChange"
    @current-change="tablePageChange"
    :current-page="table.page"
    :page-sizes="table.pageSizes"
    :page-size="table.pageSize"
    :total="table.total"
    layout="total, sizes, prev, pager, next, jumper">
</el-pagination>

data() {
  return {
    search:{                                //檢索關(guān)聯(lián)
      status: 'ALL',
      create_time: [start, end],
      seller_flag: -1,
      buyer_remark: 0,
      seller_remark: 0,
      address_code: '',
      keyword_trade: '',
      keyword_sku: '',
      keyword_address: ''
    },
    table: {
      pageSize: 20,                         //默認(rèn)每頁(yè)數(shù)據(jù)量
      pageSizes: [20, 30, 50, 100],         //可選的分頁(yè)數(shù)據(jù)量
      page: 1,                              //當(dāng)前頁(yè)碼
      total: 0,                             //分頁(yè)總數(shù)據(jù)量 后端提供
      sort: {},                             //排序數(shù)據(jù)
    },
  }
},

methods: {
  tableSizeChange(size) {
    this.table.pageSize = size;
    this.onSearchSubmit()
  },
  tablePageChange(page) {
    this.table.page = page;
    this.onSearchSubmit()
  },
  onSearchSubmit() {
    this.loading = true;
    this.$store.dispatch('tradeSearch', {
      ...this.search,
      page: this.table.page,
      page_size: this.table.pageSize,
      callback: res => {
        this.loading = false;
        if (!res.code) {
          if (res.data.page === 1) {
             this.table.total = res.data.total
          }
          this.list = res.data.list.map(({id}) => id);
        } else {
          this.list = [];
        }
      }
    });
  },