Ant Design Vue table组件怎么自定义分页器

Ant Design Vue table组件自定义分页器

由 Ant Design of Vue 提供的Table表格组件自身是带有pagination分页功能的，用于获取到后台返回的全部数据时很适用。但是项目需求需要用到分页查询以及条数查询时，就需要我们对代码做出改变

1.设置pagination属性为false,取消table组件自带的分页效果

2.使用分页组件,选用合适的属性

data () {
    return {
      total:0,
      pageSize: 10,
      current: 1
},
watch: {
    // 监听条数的改变
    pageSize(val) {
      console.log('pageSize', val);
      this.pageSize = val
      this.current = 1
      this.getRtSignByPage()
    },
    // 监听页数的改变
    current(val) {
      console.log('current', val);
      this.current = val
      this.getRtSignByPage()
    },
},
mounted () {
    this.getRtSignByPage()
},
methods: {
    // 按条件分页查询
    async getRtSignByPage () {
      let { data } = await getMenuPages({
        current:this.current,
        size:this.pageSize
      })
      this.data = data.data.records
      this.total = data.data.total
    }
}

使用Ant Design Vue的Table组件，解决点击任意内容详情，点击返回分页器页数默认回到第一页

问题描述

使用 Ant Design Vue的 Table 组件时，点击底部分页器切换页面，表格信息会重新加载，但是页面路由还是相同的，这就导致切换页面之后，点击某一元素的详情页面之后，点击返回默认回到表格的第一页，就比如你点击页数为 3 的一个元素切换到它的详情页，点击返回，表格又回到了页数 1，这样的操作体验十分不友好

Ant Design Vue table组件怎么自定义分页器

解决方法

巧妙运用 pagination 的 defaultCurrent（默认页数属性），配合使用 onChange方法，使用 sessionStorage.setItem() 和 sessionStorage.getItem() 来存储和取出当前页数，

表格代码

这里的代码只是测试用例，用于演示

data(){ return{ data, columns, currentPage:Number(sessionStorage.getItem('currentPage')) || 1,, pagination: { pageSize: 5, // 默认每页显示数量 defaultCurrent: Number(sessionStorage.getItem('currentPage')) || 1, // 默认当前页数 showSizeChanger: true, // 显示可改变每页数量 pageSizeOptions: ['5', '10', '20', '50'], // 每页数量选项 showTotal: total => `Total ${total} items`, // 显示总数 showSizeChange: (current, pageSize) => this.pageSize = pageSize, // 改变每页数量时更新显示 // 改变页数时时触发函数 onChange: (current) => { this.currentPage = current; } } } },

// 点击详情事件 ClickDetail(){ sessionStorage.setItem('currentPage',this.currentPage) // 下面是自己的具体的页面逻辑，即跳转路由的操作 this.$route.xxxxxx }