vue3.0手动封装分页组件的方法

首先，我们需要明确什么是分页组件。分页组件是网页或应用中常见的一种翻页工具，可以按照一定的页面数或者数据条数来分割数据，并且实现数据的分页展示。Vue 3.0 是当下最新版本的 Vue 框架，它具有精简、性能优越、使用方便等特点，因此我们选择 Vue 3.0 作为开发分页组件的平台。

手动封装分页组件的过程主要包括以下几个步骤：

1. 在 Vue 项目中创建一个分页组件

<template>
  <div>
    <ul>
      <li v-if="currentPage > 1" @click="updatePage(currentPage-1)">上一页</li>
      <li v-for="page in pages" :key="page" @click="updatePage(page)" :class="{active: currentPage == page}">{{ page }}</li>
      <li v-if="currentPage < totalPages" @click="updatePage(currentPage+1)">下一页</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 100
    }
  },
  computed: {
    totalPages() {
      return Math.ceil(this.total / this.pageSize);
    },
    pages() {
      const pages = []
      for (let i = 1; i <= this.totalPages; i++) {
        pages.push(i)
      }
      return pages
    }
  },
  methods: {
    updatePage(page) {
      this.currentPage = page
      this.$emit('page-changed', page)
    }
  }
}
</script>

<style>
.active {
  color: red;
}
</style>

上述代码中，我们创建了一个基本的分页组件，实现了分页功能。在组件中，我们定义了 currentPage（当前页码）、pageSize（每页数据量）、total（数据总量）三个核心属性，并通过计算属性 totalPages 实现了总页数的计算。接着，用一个循环渲染出了表示当前可供选择页码的页码列表 pages，并实现前一页、后一页的功能。最后，我们给当前选中页码设置了样式（通过 class .active 实现）。

1. 在 Vue 项目页面中使用分页组件

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item">{{ item }}</li>
    </ul>
    <page :total="total" @page-changed="handlePageChanged"></page>
  </div>
</template>

<script>
import Page from '@/components/Page.vue'

export default {
  components: {
    Page
  },
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 100,
      items: []
    }
  },
  methods: {
    handlePageChanged(page) {
      this.currentPage = page
      this.getItems()
    },
    async getItems() {
      const startIndex = (this.currentPage - 1) * this.pageSize
      this.items = await fetchData(startIndex, this.pageSize)
    }
  }
}
</script>

在页面中，我们引入了刚才创建的分页组件 Page，并传入当前数据的总量（total）。接着，我们在 data 函数中定义当前页码（currentPage）、每页数据量（pageSize）、items（当前展示数据），并在 methods 中实现了 handlePageChanged、getItems 两个方法。handlePageChanged 方法用于处理分页组件的页码变化，getItems 方法用于根据当前页码和每页数据量从后台获取数据。最后，在页面渲染的过程中，我们渲染了一个 ul 列表展示 items，并将分页组件添加到了页面底部。

至此，我们已经完成了手动封装分页组件的过程。在使用分页组件的时候，只需要传入总的数据量，然后在 handlePageChanged 中处理数据即可实现完整的分页功能。同时，我们可以通过改变样式、修改可选页码数量等方式进行进一步的样式美化和功能扩展。

下面我们通过两个示例演示如何使用手动封装的分页组件。

示例1：Vue + ElementUI 实现分页

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="日期"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
    <page :total="total" @page-changed="handlePageChanged"></page>
  </div>
</template>

<script>
import Page from '@/components/Page.vue'
import { reactive } from 'vue'
import { getTableData } from '@/api'

export default {
  components: {
    Page
  },
  setup() {
    const state = reactive({
      currentPage: 1,
      pageSize: 10,
      total: 0,
      tableData: []
    })

    const handlePageChanged = (page) => {
      state.currentPage = page
      getData()
    }

    const getData = async () => {
      const { data } = await getTableData(state.currentPage, state.pageSize)
      state.tableData = data.list
      state.total = data.total
    }

    onMounted(() => {
      getData()
    })

    return {
      ...toRefs(state),
      handlePageChanged
    }
  }
}
</script>

在示例1中，我们引入了 ElementUI 的表格组件，并通过 getTableData 方法从后台获取数据。在 setup 函数中，我们使用 Vue 3.0 的 Composition API，通过 reactive 函数创建了一个响应式对象 state，其中包含了 currentPage、pageSize、total、tableData 等核心属性。接着，我们使用 onMounted 函数在组件挂载完成后获取数据，并实现了 handlePageChanged 和 getData 两个方法。handlePageChanged 方法用于处理分页组件的页码变化，getData 方法用于根据当前页码和每页数据量从后台获取数据。最后，在渲染界面时，我们将分页组件添加在表格下面。

示例2：Vue + Antd 实现分页

<template>
  <div>
    <a-table :columns="columns" :dataSource="tableData" bordered pagination="@false" />
    <page :total="total" @page-changed="handlePageChanged"></page>
  </div>
</template>

<script>
import Page from '@/components/Page.vue'
import { reactive } from 'vue'
import { getTableData } from '@/api'

export default {
  components: {
    Page
  },
  setup() {
    const state = reactive({
      currentPage: 1,
      pageSize: 10,
      total: 0,
      tableData: []
    })

    const columns = [
      {
        title: '姓名',
        dataIndex: 'name',
        key: 'name'
      },
      {
        title: '年龄',
        dataIndex: 'age',
        key: 'age'
      },
      {
        title: '地址',
        dataIndex: 'address',
        key: 'address'
      }
    ]

    const handlePageChanged = (page) => {
      state.currentPage = page
      getData()
    }

    const getData = async () => {
      const { data } = await getTableData(state.currentPage, state.pageSize)
      state.tableData = data.list
      state.total = data.total
    }

    onMounted(() => {
      getData()
    })

    return {
      ...toRefs(state),
      columns,
      handlePageChanged
    }
  }
}
</script>

在示例2中，我们引入了 Antd 的表格组件，并通过 getTableData 方法从后台获取数据。与示例1中相似的是，我们在 setup 函数中使用了 reactive 函数创建了响应式对象 state，并实现了 handlePageChanged 和 getData 两个方法。区别在于，我们使用了 Antd 的 pagination 属性实现了分页功能，具体方式是将其设置为 false，并使用自定义的分页组件。最后，在渲染界面时，我们将分页组件添加在表格下面。

总结：以上两个示例展示了手动封装分页组件的基本实现方式，并且演示了如何在 Vue 3.0 项目中通过第三方组件库（ElementUI 和 Antd）与后台接口进行集成。通过手动封装分页组件，我们可以根据自己的需求进行样式和功能的定制，同时提高了代码的复用性和可维护性。