vue+iview tables多个分页实现

1. 如果一个页面有多个分页那么可以把每个page和pageSize放到一个对象中，如下：

dataList: {
    name: 'dataList', // 方便取到dataList对象
    id: null, // 如果需要通过id获取一个列表
    fun: 'getDataList', // 获取列表的方法
    total: 0,
    page: 1,
    pageSize: 10
},    

1. tables中将dataList传递给分页事件，on-change传值时，使用$event作为第二个参数（必须是第二个）

<tables ref="tables" v-model="pdParams" :columns="tableColumns" :total="dataList.total"
        :current="dataList.page" :page-size="dataList.pageSize" 
        @on-change="changePage(dataList, $event)"
        @on-page-size-change="changePageSize(dataList, $event)"  stripe></tables>

1. 分页事件

changePage: function (obj, page) {
    this[obj.name].page = page
    this[obj.fun](obj.id)
},
changePageSize: function (obj, pageSize) {
    this[obj.name].pageSize = pageSize
    this[obj.fun](obj.id)
},

1. 获取数据列表方法

// 可传入搜索参数
getDataList: function(param){
    let vm = this
    param = param || {}

    $http(vm, 'CFNT0001', 'query', param, (res)=>{
        vm.dataList.total = parseInt(res.total)
        vm.listParam = res.list || []
    }, vm.dataList)
},

// 通过某个id获取参数
getDataList: function(someId){
    let vm = this
    $http(vm, 'CFNT0001', 'query', {someId}, (res)=>{
        vm.dataList.total = parseInt(res.total)
        vm.listParam = res.list || []
    }, vm.dataList)
},

1. 接口把page分页封装进去

export const $http = (vm, tradeCode, action, param, success, pageable, error)=>{
    param = param || {}
    let baseParam = pageable? { // 如果传递了分页对象就使用该对象的page和pageSize
        page: pageable.page,
        pageSize: pageable.pageSize
    }: {}
    // assign将两个对象合并成一个
    let extParam = Object.assign(baseParam, param)
    vm.$request({
        tradeCode: tradeCode,
        action: action,
        data: extParam,
        success: res=>{
            success && success(res)
        },
        error: res=>{
            error && error(res)
        }
    })
}

转载于:https://www.cnblogs.com/codebook/p/11108280.html