ant-design-vue table分页onShowSizeChange后的pageNo解决

　　目录

　　ant-design-vue table分页onShowSizeChange后的pageNo

　　onSizeChange 后当前页问题

　　首先,大致描述一下出现这个问题的情形:

　　data(){

　　return {

　　pagination: {

　　pageNo: 1,

　　pageSize: 5,

　　total:0,

　　showSizeChanger: true,

　　pageSizeOptions: ['5', '10', '50'],

　　showTotal: total => `共 ${total} 条`,

　　onShowSizeChange: (current, pageSize) => this.onSizeChange(current, pageSize),

　　onChange:(page,pageSize)=> this.onPageChange(page, pageSize)

　　},

　　}

　　},

　　methods: {

　　onPageChange(page, pageSize) {

　　this.pagination.pageNo = page

　　this.getList()

　　},

　　onSizeChange(current, pageSize) {

　　this.pagination.pageNo = 1

　　this.pagination.pageSize = pageSize

　　this.getList()

　　}

　　}

　　页面加载数据,pageNo 是 1, pageSize 是 5,假如接口返回 total 是 12,这时分页有3页,选择第2页,然后改变每页条数为10,onSizeChange 里面设置了this.pagination.pageNo = 1,但是得到的结果是 当前页在第2页.

　　原因分析

　　自己百度查找并没有找到解决的方法,还希望哪个高手给指点下(不知道是不是 antd的bug)

　　解决方法: 升级 antd 版本

　　后来看了下官方文档,发现新的版本 已经舍弃了 pageNo,改用 current,上面的问题在版本升级后也没再出现,我之前使用的版本是"ant-design-vue": "~1.3.8",现在官网的版本是1.5.3,如果有遇到类似问题的小伙伴可以升级下版本试试.

　　onSizeChange(current, pageSize) {

　　this.pagination.current= 1

　　this.pagination.pageSize = pageSize

　　this.getList()

　　}

　　vue AntDesign table分页

　　1、标签中添加属性 :pagination="pagination"

　　2、data中设置pagination和total

　　data(){

　　return {

　　totai:0, //总条数

　　pagination: {

　　current: 1,//页码

　　pageSize: 10,//条数

　　showSizeChanger: true,

　　total: this.total,

　　pageSizeOptions: ['5', '10', '20', '30', '40', '100'],

　　showTotal: (total) => `共 ${total} 条数据`,

　　onShowSizeChange: this.pageSizeChange,

　　onChange: this.pageChange,

　　},

　　}

　　}

　　3、methods 方法中

　　methods:{

　　pageSizeChange(val, pageNum) {

　　this.loading = true

　　this.pagination.pageSize = pageNum

　　this.pagination.current = 1

　　const params = {

　　rows: this.pagination.pageSize,

　　page: this.pagination.current,

　　}

　　this.getTemplateLibraryList(params) //获取列表数据

　　},

　　pageChange(page, val) {

　　this.loading = true

　　this.pagination.current = page

　　const params = {

　　rows: this.pagination.pageSize,

　　page: this.pagination.current,

　　}

　　this.getTemplateLibraryList(params) //获取列表数据

　　},

　　}

　　4、获取列表数据后

　　this.data = res && res.hasOwnProperty('rows') ? res.rows : []

　　this.total = res && res.hasOwnProperty('total') ? res.total : 0

　　this.pagination.total = this.total

　　总结

　　以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

　　您可能感兴趣的文章: