vue3 实现分页组件

Vue3实现分页组件的步骤如下：

1. 创建Pagination组件

首先，我们需要创建Pagination组件，该组件包含以下内容：

<template>
  <div class="pagination">
    <ul>
      <li v-if="currentPage > 1" @click="changePage(currentPage - 1)">
        <a href="#">上一页</a>
      </li>
      <li v-for="index in pages" :key="index" :class="{ active: currentPage === index }" @click="changePage(index)">
        <a href="#">{{ index }}</a>
      </li>
      <li v-if="currentPage < pageCount" @click="changePage(currentPage + 1)">
        <a href="#">下一页</a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Pagination",
  props: {
    currentPage: {
      type: Number,
      default: 1,
    },
    pageSize: {
      type: Number,
      default: 10,
    },
    total: {
      type: Number,
      default: 0,
    },
  },
  computed: {
    pageCount() {
      return Math.ceil(this.total / this.pageSize);
    },
    pages() {
      const pages = [];
      for (let i = 1; i <= this.pageCount; i++) {
        pages.push(i);
      }
      return pages;
    },
  },
  methods: {
    changePage(page) {
      if (page !== this.currentPage) {
        this.$emit("update:currentPage", page);
      }
    },
  },
};
</script>

<style>
.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.pagination ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

.pagination li {
  margin: 0 5px;
}

.pagination li a {
  display: block;
  padding: 5px 10px;
  text-decoration: none;
  color: #333;
  border-radius: 3px;
  transition: background-color 0.3s ease-in-out;
}

.pagination li.active a {
  background-color: #333;
  color: #fff;
}
</style>

2. 在父组件中使用Pagination组件

在父组件中，我们需要将currentPage、pageSize和total属性传递给Pagination组件，并且监听Pagination组件的update:currentPage事件，以便在分页组件中改变当前页码时，更新父组件中的数据。

<template>
  <div class="container">
    <h1>分页组件</h1>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in list" :key="index">
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
        </tr>
      </tbody>
    </table>
    <Pagination :currentPage.sync="currentPage" :pageSize="pageSize" :total="total" />
  </div>
</template>

<script>
import Pagination from "./Pagination.vue";

export default {
  name: "App",
  components: {
    Pagination,
  },
  data() {
    return {
      list: [
        {
          name: "小明",
          age: 18,
        },
        {
          name: "小红",
          age: 20,
        },
        {
          name: "小张",
          age: 22,
        },
        {
          name: "小李",
          age: 24,
        },
        {
          name: "小王",
          age: 26,
        },
        {
          name: "小刘",
          age: 28,
        },
        {
          name: "小赵",
          age: 30,
        },
        {
          name: "小钱",
          age: 32,
        },
        {
          name: "小孙",
          age: 34,
        },
        {
          name: "小周",
          age: 36,
        },
      ],
      currentPage: 1,
      pageSize: 4,
      total: 10,
    };
  },
  computed: {
    dataList() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.list.slice(start, end);
    },
  },
  watch: {
    currentPage(val) {
      console.log(val);
    },
  },
};
</script>

<style>
.container {
  max-width: 600px;
  margin: 0 auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 10px;
  text-align: left;
  border: 1px solid #ccc;
}
</style>

3. 实现分页逻辑

在父组件中，我们需要根据当前页码和每页显示条数，计算出需要显示的数据，然后将其渲染到页面上。同时，我们需要监听Pagination组件的update:currentPage事件，以便在分页组件中改变当前页码时，更新父组件中的数据。

完整的代码如下：

<template>
  <div class="container">
    <h1>分页组件</h1>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in dataList" :key="index">
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
        </tr>
      </tbody>
    </table>
    <Pagination :currentPage.sync="currentPage" :pageSize="pageSize" :total="total" />
  </div>
</template>

<script>
import Pagination from "./Pagination.vue";

export default {
  name: "App",
  components: {
    Pagination,
  },
  data() {
    return {
      list: [
        {
          name: "小明",
          age: 18,
        },
        {
          name: "小红",
          age: 20,
        },
        {
          name: "小张",
          age: 22,
        },
        {
          name: "小李",
          age: 24,
        },
        {
          name: "小王",
          age: 26,
        },
        {
          name: "小刘",
          age: 28,
        },
        {
          name: "小赵",
          age: 30,
        },
        {
          name: "小钱",
          age: 32,
        },
        {
          name: "小孙",
          age: 34,
        },
        {
          name: "小周",
          age: 36,
        },
      ],
      currentPage: 1,
      pageSize: 4,
      total: 10,
    };
  },
  computed: {
    dataList() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.list.slice(start, end);
    },
  },
  watch: {
    currentPage(val) {
      console.log(val);
    },
  },
};
</script>

<style>
.container {
  max-width: 600px;
  margin: 0 auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 10px;
  text-align: left;
  border: 1px solid #ccc;
}
</style>

以上就是Vue3实现分页组件的详细步骤。