vue+iview tables多個分頁實現

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

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

2. 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>

3. 分頁事件

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)
},

4. 獲取數據列表方法

// 可傳入搜索參數
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)
},

5. 接口把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)
        }
    })
}