vue前端实现分页查询

实现分页查询的基本思路

Vue前端实现分页查询通常需要结合后端API，通过传递页码(page)和每页条数(pageSize)参数获取分页数据。前端需要处理页码切换、数据渲染和分页器交互逻辑。

核心代码结构

<template>
  <div>
    <table>
      <tr v-for="item in tableData" :key="item.id">
        <!-- 表格内容渲染 -->
      </tr>
    </table>

    <div class="pagination">
      <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
      <span>{{ currentPage }} / {{ totalPage }}</span>
      <button @click="nextPage" :disabled="currentPage === totalPage">下一页</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],   // 当前页数据
      currentPage: 1,  // 当前页码
      pageSize: 10,    // 每页条数
      total: 0         // 总数据量
    }
  },
  computed: {
    totalPage() {
      return Math.ceil(this.total / this.pageSize)
    }
  },
  methods: {
    fetchData() {
      const params = {
        page: this.currentPage,
        pageSize: this.pageSize
      }

      axios.get('/api/data', { params })
        .then(res => {
          this.tableData = res.data.list
          this.total = res.data.total
        })
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--
        this.fetchData()
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPage) {
        this.currentPage++
        this.fetchData()
      }
    }
  },
  mounted() {
    this.fetchData()
  }
}
</script>

使用Element UI的分页组件

如果使用Element UI，可以简化分页逻辑：

<template>
  <div>
    <el-table :data="tableData">
      <!-- 表格列定义 -->
    </el-table>

    <el-pagination
      @current-change="handlePageChange"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      layout="prev, pager, next">
    </el-pagination>
  </div>
</template>

<script>
export default {
  methods: {
    handlePageChange(page) {
      this.currentPage = page
      this.fetchData()
    }
  }
}
</script>

分页查询优化建议

1. 防抖处理：频繁切换页码时添加防抖，避免短时间内多次请求
2. 缓存策略：已访问过的页码数据可做本地缓存
3. 滚动加载：移动端可考虑无限滚动模式替代传统分页
4. URL同步：将当前页码同步到URL参数，便于分享和刷新保持状态

完整示例代码

<template>
  <div>
    <input v-model="searchQuery" placeholder="搜索..." @input="handleSearch"/>

    <table>
      <tr v-for="item in filteredData" :key="item.id">
        <td>{{ item.name }}</td>
        <td>{{ item.value }}</td>
      </tr>
    </table>

    <div class="pagination">
      <button 
        v-for="page in pageNumbers" 
        :key="page"
        @click="goToPage(page)"
        :class="{ active: page === currentPage }">
        {{ page }}
      </button>
    </div>
  </div>
</template>

<script>
import _ from 'lodash'

export default {
  data() {
    return {
      allData: [],
      filteredData: [],
      searchQuery: '',
      currentPage: 1,
      pageSize: 5,
      totalItems: 0
    }
  },
  computed: {
    totalPages() {
      return Math.ceil(this.totalItems / this.pageSize)
    },
    pageNumbers() {
      const range = []
      const maxVisible = 5
      let start = Math.max(1, this.currentPage - Math.floor(maxVisible/2))
      let end = Math.min(this.totalPages, start + maxVisible - 1)

      if(end - start < maxVisible - 1) {
        start = Math.max(1, end - maxVisible + 1)
      }

      for(let i = start; i <= end; i++) {
        range.push(i)
      }

      return range
    }
  },
  methods: {
    fetchData: _.debounce(function() {
      axios.get('/api/data', {
        params: {
          page: this.currentPage,
          pageSize: this.pageSize,
          query: this.searchQuery
        }
      }).then(response => {
        this.filteredData = response.data.items
        this.totalItems = response.data.total
      })
    }, 300),

    handleSearch() {
      this.currentPage = 1
      this.fetchData()
    },

    goToPage(page) {
      if(page !== this.currentPage) {
        this.currentPage = page
        this.fetchData()
      }
    }
  },
  created() {
    this.fetchData()
  }
}
</script>

<style>
.pagination button {
  margin: 0 5px;
}
.pagination button.active {
  font-weight: bold;
  color: blue;
}
</style>