vue+iview分页组件的封装

下面将详细讲解vue+iview分页组件的封装。

一、分页组件介绍

在前端开发中，经常需要用到分页组件，用于将数据分页展示。iview是一套基于 Vue.js 的开源 UI 组件库，内置了丰富的组件，包括分页组件。iview分页组件具有易用、美观、可定制性强等优点。因此，本文以iview分页组件为例，介绍Vue+iview分页组件的封装。

二、组件封装

1.安装iview和vue分页插件

首先需要安装iview和vue分页插件，可以通过以下命令进行安装：

npm install iview --save
npm install vue-pagination-2 --save

2.封装分页组件

接下来是最重要的封装分页组件的过程。在src/components下新建 Pagination.vue 文件，代码如下：

<template>
  <div>
    <div class="custom-pagination">
      <Page :total="total" :current="current" :page-size="pageSize" @on-change="handleChange" :show-total="true" show-elevator show-sizer></Page>
    </div>
    <div class="custom-total">共{{ total }}条</div>
  </div>
</template>

<script>
import Page from 'iview/src/components/page';
import vuePagination from 'vue-pagination-2';

export default {
  name: 'Pagination',
  components: {
    Page,
    vuePagination
  },
  props: {
    total: {
      type: Number,
      required: true
    },
    pageSize: {
      type: Number,
      required: true
    },
    current: {
      type: Number,
      required: true
    }
  },
  methods: {
    handleChange(currentPage) {
      this.$emit('change', currentPage);
      this.$emit('update:current', currentPage);
    }
  }
};
</script>

<style>
.custom-pagination {
  text-align: center;
  margin-top: 20px;
}

.custom-total {
  text-align: center;
  margin-top: 10px;
}
</style>

代码中，我们引入了iview的Page组件和vue-pagination-2插件；定义了分页组件的props参数，包括total、pageSize和current；通过@on-change事件监听分页页码的变化，从而达到翻页的效果；最后通过emit事件将当前页传递给父组件，也可以自行选择更新组件内部的current参数。

3.在父组件中使用分页组件

父组件中引入Pagination组件，并在template中进行使用。示例如下：

<template>
  <div>
    <Pagination :total="total" :page-size="10" :current.sync="currentPage" @change="refreshList"></Pagination>
    <Table :data="list" border stripe>
      <Table-column title="姓名" key="name"></Table-column>
      <Table-column title="年龄" key="age"></Table-column>
    </Table>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination.vue';

export default {
  name: 'List',
  components: {
    Pagination
  },
  data() {
    return {
      total: 50,
      currentPage: 1,
      list: []
    };
  },
  methods: {
    refreshList(currentPage) {
      this.currentPage = currentPage;
      //调用接口获取数据
      //此处略去接口请求代码
      this.list = response.data.list;
    }
  }
};
</script>

代码中，我们引入了Pagination组件，并传入了total、pageSize和current三个props参数；并在refreshList方法中调用接口，获取对应的数据，从而完成了分页展示的过程。同时，由于currentPage被设置为.sync修饰符，因此，分页组件的页码变化会自动更新到父组件中的currentPage参数上，实现了分页组件和父组件的数据交互。

三、总结

至此，vue+iview分页组件的封装过程完成。本文以iview分页组件为例，介绍了Vue+iview分页组件的封装方式，并给出了完整的代码示例。此外，iview分页组件的风格可以通过自定义样式进行修改，以适应各自项目的需求。

参考文献：
1. iView - 一套基于 Vue.js 的高质量 UI 组件库 http://v1.iviewui.com/
2. vue-pagination-2分页插件 https://github.com/matfish2/vue-pagination-2