java分页模块复用性高,分页组件要怎么实现怎么复用？给提供个思路吧？

aluckdog

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

    @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">

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

        }

      }

    });

  },