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