vue iview实现分页

实现分页功能

在Vue项目中使用iView组件库实现分页功能，需要结合Page分页组件和数据绑定。以下是一个完整的实现示例：

<template>
  <div>
    <Table :columns="columns" :data="tableData"></Table>
    <Page 
      :total="total" 
      :current="currentPage" 
      :page-size="pageSize" 
      @on-change="handlePageChange"
      show-total
      show-elevator
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { title: '姓名', key: 'name' },
        { title: '年龄', key: 'age' },
        { title: '地址', key: 'address' }
      ],
      tableData: [],
      total: 0,
      currentPage: 1,
      pageSize: 10
    }
  },
  methods: {
    fetchData(page = 1) {
      // 模拟API请求
      const mockData = this.getMockData(page)
      this.tableData = mockData.list
      this.total = mockData.total
    },
    handlePageChange(page) {
      this.currentPage = page
      this.fetchData(page)
    },
    getMockData(page) {
      // 生成模拟数据
      const list = []
      const start = (page - 1) * this.pageSize
      for (let i = 0; i < this.pageSize; i++) {
        list.push({
          name: `用户${start + i}`,
          age: 20 + (start + i),
          address: `北京市海淀区${start + i}号`
        })
      }
      return {
        list,
        total: 100 // 模拟总数据量
      }
    }
  },
  created() {
    this.fetchData()
  }
}
</script>

核心配置说明

Page组件的主要属性配置：

• total: 总数据量，必填项
• current: 当前页码，使用.sync修饰符或手动更新
• page-size: 每页显示条数，默认10
• show-total: 显示总条数
• show-elevator: 显示页码跳转输入框

事件处理：

• @on-change: 页码改变时的回调，参数为新页码
• @on-page-size-change: 每页条数改变时的回调

与后端API配合

实际项目中通常需要与后端API配合：

async fetchData(page = 1) {
  const res = await api.getList({
    page,
    pageSize: this.pageSize
  })
  this.tableData = res.data.list
  this.total = res.data.total
}

样式自定义

可以通过覆盖CSS类名自定义样式：

.ivu-page-item-active {
  background-color: #2d8cf0;
  border-color: #2d8cf0;
}

注意事项

1. 确保total值正确反映后端返回的总数据量
2. 分页改变时需要同步更新currentPage和重新获取数据
3. 大型项目建议将分页逻辑封装为mixin或独立组件
4. 移动端可考虑使用simple模式简化分页器

以上实现方式适用于大多数Vue+iView的分页场景，可根据实际需求调整分页样式和交互逻辑。