vue 中的 Table 实现新增时的正确页面跳转

问题描述

组件自带的属性是每页展示十条数据，多了就增加到下一页，即具有分页功能，但是却不能自动进行分页跳转，即当增加第十一条数据的时候，输入框在第二页中，但是此时看到的页面仍然是第一页，也就不能正常进行数据的增加。

代码实现

首先在table中增加change方法用来实现点击分页和绑定分页器pagination实现自动分页；

<a-table @change="changePage" :pagination = "pagination">

</a-table>

其次在data中定义分页器pagination含有的变量；

data() {
   return {
        //定义分页器，使当新增数据时表格可以自动分页
        pagination: {
            current: 1,
            pageSize: 10,
        },
    };
},

最后在各方法中进行相应代码的实现；

methods: {
	//表单分页（点击下方的页码时触发的方法）
	changePage(pagination){
		this.pagination.current = pagination.current;
	},
	// 显示页面内容
    show(title,editableColumns,data, fatherItem) {
        this.pagination.current = 1;//初始状态显示第一页
    },
    // 添加一条数据
     handleAdd() {
         //判断新增时的数据应该显示在第几页，进而进行正确的页面跳转
         this.pagination.current = Math.ceil(this.cacheData.length / 10);//返回值为大于等于其数字参数的最小整数。
     },
}