翻页器传参设计，统一修改配置

问题由来

业务突然说把所有页面的翻页器，每页条数默认10条改为50条

现状

每个涉及翻页的页面默认请求条数是独立的，默认展示的条数也是独立的

问题解析

1.翻页器是使用了Element UI，翻页器有3个配置项

• page-size：每页显示条目个数
• current-page：当前页数
• total：总条目数

2.请求接口参数

data(){
    return {
        form:{
            ...
            rows:10,
            page:1
        }
    }
}

上面是翻页器涉及的2个地方

修改前VS修改后

• 修改前

<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page.sync="pageData.currentPage"
  :page-sizes="[10, 50, 100, 200]"
  :page-size.sync="pageData.size"
  layout="total, sizes, prev, pager, next, jumper"
  :total="pageData.total">
</el-pagination>

props:{
    pageData:{type:Object}
}

data(){
    return {
        form:{
            ...
            rows:10,
            page:1
        },
        pageData:{
            currentPage:xx,
            size:xx,
            total:xx
        }
    }
}

axios.get('/list', {
    params: this.form
}).then(res=> {
    this.pageData = res.dataConfig//后台会返回相应的配置信息去初始化翻页器
})

• 修改后
• 翻页器组件

<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page.sync="pageData.currentPage || 1 "
  :page-sizes="[10, 50, 100, 200]"
  :page-size.sync="pageData.size || 50"
  layout="total, sizes, prev, pager, next, jumper"
  :total="pageData.total || 0">
</el-pagination>

props:{
    pageData:{type:Object}
}

• 使用翻页器的组件

import {pageConfig} from 'config.js'

data(){
    return {
        form = {
            ...
            rows:10,
            page:1
        },
        pageData:{}
    }
}

mounted(){
    this.form = {...this.form,...pageConfig}
}

axios.get('/list', {
    params: this.form
}).then.....

• config.js

export let pageConfig = {
    rows:50,
    page:1
}

修改后可以通过config里的pageConfig去控制所有翻页器的请求参数， 翻页器组件本身也修改成了有默认值，而不是一定使用父组件传递的

如果大佬们有优化的建议，欢迎留言评论，感谢大家的阅读