zoukankan      html  css  js  c++  java
  • 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)
            }
        })
    }
    
  • 相关阅读:
    WPF中Name和x:Name
    依赖注入(Dependency Injection)
    SQL复制表操作
    奇异值分解和聚类分析操作流程
    奇异值分解(SVD)
    js读取本地txt文件中的json数据
    Python对字典(directory)按key和value排序
    PowerDesigner导入java类生成类图
    python-Levenshtein几个计算字串相似度的函数解析
    编辑距离算法(Levenshtein)
  • 原文地址:https://www.cnblogs.com/codebook/p/11108280.html
Copyright © 2011-2022 走看看