“每天3分钟，她的腰围瘦了15厘米“ 实现前端分页功能的方法

原创于 2025-12-16 15:16:16 发布 · 171 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端

实现前端分页功能的方法

定义分页参数与数据存储
在Vue3的<script setup>或组件选项中，定义分页相关参数和数据容器：

const queryParams = ref({
  model_name: undefined,  // 搜索条件字段
  api_key: undefined,
  page: 1,               // 当前页码
  page_size: 10          // 每页条数
})
const allDataList = ref([])  // 原始数据集合
const tableList = ref([])    // 当前页渲染数据

分页逻辑实现
通过计算起始索引实现数据切片：

function ### 完善分页处理方法

在现有代码基础上，需要确保`handlePagination()`方法正确处理分页逻辑。以下是改进建议：

```javascript
function handlePagination() {
  const { pageNum, pageSize } = queryParams.value
  const startIndex = (pageNum - 1) * pageSize
  const endIndex = pageNum * pageSize
  
  // 切片获取当前页数据
  tableData.value = allDataList.value.slice(startIndex, endIndex)
}

添加分页参数初始化

确保查询参数包含必要的分页字段：

const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  // 其他查询条件...
})

处理页码改变事件

添加分页组件事件处理方法：

function handlePageChange(newPage) {
  queryParams.value.pageNum = newPage
  handlePagination()
}

处理每页条数改变事件

function handleSizeChange(newSize) {
  queryParams.value.pageSize = newSize
  queryParams.value.pageNum = 1  // 重置到第一页
  handlePagination()
}

完整示例模板

/** 查询大模型限流列表 */
function getList() {
  loading.value = true
  
  listModelRateLimit(queryParams.value).then(res => {
    if(res.code === 200){
      allDataList.value = res.data
      total.value = allDataList.value.length
      handlePagination()
    }
  }).catch(err => {
    proxy.$modal.msgError(err.msg || '查询失败')
  }).finally(() => {
    loading.value = false
  })
}

注意事项

确保组件模板中包含分页控件并绑定相应事件：

<el-pagination
  @current-change="handlePageChange"
  @size-change="handleSizeChange"
  :current-page="queryParams.pageNum"
  :page-sizes="[10, 20, 50, 100]"
  :page-size="queryParams.pageSize"
  layout="total, sizes, prev, pager, next"
  :total="total">
</el-pagination>