当前位置：首页 > VUE

vue iview实现分页

2026-01-18 16:17:19VUE

Vue + iView 实现分页

在 Vue 项目中结合 iView 组件库实现分页功能，可以通过 Page 组件轻松完成。以下是具体实现方法：

安装 iView 确保项目中已安装 iView，可以通过 npm 或 yarn 安装：

npm install view-design --save

引入 iView 在 main.js 中全局引入 iView：

import Vue from 'vue';
import ViewUI from 'view-design';
import 'view-design/dist/styles/iview.css';

Vue.use(ViewUI);

基本分页实现 在组件中使用 Page 组件，绑定当前页码 current 和总数据量 total：

<template>
  <div>
    <Page :current="currentPage" :total="total" @on-change="handlePageChange" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      total: 100
    };
  },
  methods: {
    handlePageChange(page) {
      this.currentPage = page;
      // 触发数据加载逻辑
      this.loadData();
    },
    loadData() {
      // 根据 currentPage 请求数据
      console.log('加载页码:', this.currentPage);
    }
  }
};
</script>

结合表格分页 通常分页与表格数据一起使用，以下是完整示例：

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

<script>
export default {
  data() {
    return {
      columns: [
        { title: '姓名', key: 'name' },
        { title: '年龄', key: 'age' }
      ],
      tableData: [],
      currentPage: 1,
      total: 0,
      pageSize: 10
    };
  },
  created() {
    this.loadData();
  },
  methods: {
    handlePageChange(page) {
      this.currentPage = page;
      this.loadData();
    },
    async loadData() {
      // 模拟 API 请求
      const res = await mockApiRequest(this.currentPage, this.pageSize);
      this.tableData = res.data;
      this.total = res.total;
    }
  }
};

// 模拟 API 函数
function mockApiRequest(page, size) {
  return new Promise(resolve => {
    setTimeout(() => {
      const data = Array(size).fill().map((_, i) => ({
        name: `用户 ${(page - 1) * size + i + 1}`,
        age: Math.floor(Math.random() * 30) + 20
      }));
      resolve({ data, total: 100 });
    }, 300);
  });
}
</script>

自定义分页属性 iView 的 Page 组件支持多种自定义选项：

show-total: 显示总条数
show-elevator: 显示快速跳转
show-sizer: 显示每页条数选择器
page-size-opts: 自定义每页条数选项

示例：

<Page
  :current="currentPage"
  :total="total"
  :page-size="pageSize"
  :page-size-opts="[10, 20, 50]"
  @on-change="handlePageChange"
  @on-page-size-change="handlePageSizeChange"
  show-total
  show-elevator
  show-sizer
/>

注意事项