Antd + Vue pagination“分页”使用

最新推荐文章于 2025-03-30 11:32:45 发布

narrator_y

最新推荐文章于 2025-03-30 11:32:45 发布

阅读量4.1k

点赞数 2

分类专栏：前端文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/narrator_y/article/details/106326273

版权

前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍了在Vue项目中使用Antd的分页组件时，如何处理带搜索框的表格分页以及在调整每页显示数量时避免页码错误的问题。关键在于利用isSearch开关配合current属性处理搜索后的分页，并通过onShowSizeChange事件更新pageNumber以确保正确显示数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

核心代码：
template部分

          :pagination="{
            current: isSearch ? 1: table.pageNumber,
            total:table.total,
            defaultPageSize: 5,
            showSizeChanger: true,
            pageSizeOptions: ['5', '10', '15', '20'],
            showQuickJumper: true,
            showTotal: total => `共 ${total} 条数据`,
            onShowSizeChange: (current, pageSize) =>{table.pageSize = pageSize; table.pageNumber = 1},
            onChange: (pageNumber) => table.pageNumber = pageNumber
          }"

<a-button type="primary" @click="onSearch">搜索</a-button>

js部分（获取数据）

    listCourse() {
      const formData = this.searchForm.getFieldsValue()
      if(this.isSearch) {
        formData['pageNumber'] = 1
        this.table.pageNumber = 1
        this.isSearch = false
      } else {
        formData['pageNumber'] = this.table.pageNumber
      }
      formData['pageSize'] = this.table.pageSize
      this.table.loading = true
      listCourse(formData).then(response => {
        const { data, total } = response
        this.table.list = data
        this.table.total = total
        this.table.loading = false
      })
    },
    onSearch() {
      this.isSearch = true
      this.listCourse()
    },

具体解释：

isSearch — 带搜索框的表格
在搜索框输入内容点击“搜索”按钮后，我们希望看到的结果是从第一页搜索结果开始的，所以需要isSearch开关搭配current属性使用。否则会造成搜索结果从上一个pageNumber开始显示，出现空值的问题。
核心代码：

   current: isSearch ? 1: table.pageNumber,

 onSearch() {
   this.isSearch = true
   this.listCourse()
 }

 if(this.isSearch) {
     formData['pageNumber'] = 1
     this.table.pageNumber = 1
     this.isSearch = false
   } else {
     formData['pageNumber'] = this.table.pageNumber
   }

onShowSizeChange — 调整分页基准pageSize
在调整pageSize时，即调整“5条/页”等信息时，常会出现页码问题。如一共有32条数据，按照“5条/页”共7页，若此时点击第7页，之后又点击“10条/页”，则页面会显示当前页码为4，而发送请求的pageNumber还是7，故无法显示数据。所以需要及时调整pageNumber的值。这里的做法是调整完pageSize后让当前页面从第一页开始显示。
核心代码：

current: isSearch ? 1: table.pageNumber, // current : table.pageNumber
onShowSizeChange: (current, pageSize) =>{table.pageSize = pageSize; table.pageNumber = 1},