vue实现页面分页

分页组件实现

在Vue中实现分页功能，可以通过封装一个分页组件来完成。以下是基于Element UI的分页组件示例：

<template>
  <div class="pagination-container">
    <el-pagination
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      :page-sizes="[10, 20, 30, 50]"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
export default {
  props: {
    total: {
      type: Number,
      required: true
    },
    page: {
      type: Number,
      default: 1
    },
    limit: {
      type: Number,
      default: 10
    }
  },
  data() {
    return {
      currentPage: this.page,
      pageSize: this.limit
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val
      this.$emit('pagination', { page: this.currentPage, limit: val })
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.$emit('pagination', { page: val, limit: this.pageSize })
    }
  }
}
</script>

数据请求处理

在父组件中使用分页组件并处理数据请求：

<template>
  <div>
    <table>
      <!-- 表格内容 -->
    </table>
    <pagination
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'

export default {
  components: { Pagination },
  data() {
    return {
      list: [],
      total: 0,
      listQuery: {
        page: 1,
        limit: 20
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      fetchList(this.listQuery).then(response => {
        this.list = response.data.items
        this.total = response.data.total
      })
    }
  }
}
</script>

后端API配合

后端API需要接收分页参数并返回分页数据：

// Express示例
app.get('/api/items', (req, res) => {
  const page = parseInt(req.query.page) || 1
  const limit = parseInt(req.query.limit) || 10
  const offset = (page - 1) * limit

  // 查询数据库
  const total = await Item.count()
  const items = await Item.findAll({
    offset,
    limit
  })

  res.json({
    items,
    total
  })
})

纯前端分页

对于少量数据，可以在前端实现分页：

methods: {
  handlePagination() {
    const start = (this.currentPage - 1) * this.pageSize
    const end = start + this.pageSize
    this.paginatedData = this.allData.slice(start, end)
  }
}

分页样式优化

可以自定义分页样式以适应不同需求：

.pagination-container {
  padding: 20px 0;
  text-align: center;
}

.el-pagination {
  display: inline-block;
}

以上实现方式可以根据具体项目需求进行调整，Element UI的分页组件提供了丰富的配置选项，可以满足大多数分页场景。对于不使用UI框架的项目，也可以基于原生HTML和JavaScript实现类似功能。