vue+iview tables多个分页实现

Posted 2022-02-26 codebook

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