分页组件要怎么实现怎么复用？给提供个思路吧？

Question

比如一个页面用到了分页组件，那么在分页组件内部肯定要写请求的方法，但是不同的页面获取的数据肯定不是同一个请求的（不同页面请求的接口地址肯定不是同一个），这个要怎么处理？

Answer 1

并不建议把请求封装在分页组件里面，各大主流UI框架都有现成的分页组件了，向后端请求无非就是用到分页组件的当前请求页current-page及每页请求条目个数 page-size ，页面监听到组件这2个属性变更就重新提交请求，逻辑很清晰。
你要是把请求封装在分页组件里面，要把请求方法当参数传进去吧，组件还得能接受请求额外参数吧，要提供手动请求接口吧，请求回调后又要从分页组件里面拿回调吧？这个可以实现，但总感觉逻辑不对

---

以element-ui为例 截取一段我的实现方法

<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:{                                //检索关联
      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,                         //默认每页数据量
      pageSizes: [20, 30, 50, 100],         //可选的分页数据量
      page: 1,                              //当前页码
      total: 0,                             //分页总数据量 后端提供
      sort: {},                             //排序数据
    },
  }
},

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 = [];
        }
      }
    });
  },