VUE3開發入門教學：使用元件實作分頁-Vue.js-PHP中文網

VUE3開發入門教學：使用元件實作分頁

WBOY

發布： 2023-06-16 08:48:06

原創

1945 人瀏覽過

VUE3开发入门教程：使用组件实现分页

分页是一个常见的需求，因为在实际开发中，我们往往需要将大量的数据分成若干页以展示给用户。在VUE3开发中，可以通过使用组件实现分页功能，本文将介绍如何使用组件实现简单的分页功能。

1.创建组件

首先，我们需要创建一个分页组件，使用“vue create”命令创建VUE项目，并在src/components目录下创建Pagination.vue文件。

在Pagination.vue文件中，我们需要声明组件的名称、data数据项、methods方法等。代码如下：

<template>
  <div>
    <ul v-if="pages.length">
      <li v-if="currentPage !== 1" @click="changePage(currentPage - 1)">&lt;</li>
      <li v-for="page in pages" :key="page" :class="{'active': page === currentPage}" @click="changePage(page)">{{ page }}</li>
      <li v-if="currentPage !== totalPage && totalPage > 1" @click="changePage(currentPage + 1)">&gt;</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Pagination',
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      totalPage: 0,
      pages: []
    }
  },
  props: {
    total: {
      type: Number,
      default: 0
    },
    pageSize: {
      type: Number,
      default: 10
    }
  },
  watch: {
    total() {
      this.init()
    }
  },
  methods: {
    init() {
      this.totalPage = Math.ceil(this.total / this.pageSize)
      this.pages = []
      for (let i = 1; i <= this.totalPage; i++) {
        this.pages.push(i)
      }
    },
    changePage(page) {
      if (this.currentPage === page) return
      this.currentPage = page
      // 触发自定义事件
      this.$emit('page-change', this.currentPage)
    }
  },
  created() {
    this.init()
  }
}
</script>

<style>
.pagination {
  text-align: center;
}

ul {
  display: inline-block;
  padding-left: 0;
  margin: 0;
  border-radius: 4px;
}

li {
  display: inline;
  color: #2b2b2b;
  float: left;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border: 1px solid #eee;
  margin-right: 3px;
  cursor: pointer;
}

li:hover {
  background-color: #eee;
}

.active {
  background-color: #00a0e9;
  color: #fff;
  border: 1px solid #00a0e9;
  cursor: default;
}

li:first-child {
  margin-right: 10px !important;
}

li:last-child {
  margin-left: 10px !important;
}
</style>

登入後複製

在代码中，我们需要实现分页的初始化方法init，以及向外提供分页切换的方法changePage。同时，我们通过watch监听total属性的变化，当total属性变化时，重新调用init方法初始化分页。

2.引入组件

接下来，在我们的组件中使用分页组件。例如，我们在App.vue中引入Pagination组件，并使用v-for指令在模板中循环展示数据，同时监听Pagination组件的page-change自定义事件。

代码如下：

<template>
  <div class="container">
    <ul>
      <li v-for="item in list" :key="item.id">{{item.text}}</li>
    </ul>
    <Pagination :total="total" :page-size="pageSize" @page-change="handlePageChange"/>
  </div>
</template>

<script>
import Pagination from './components/Pagination'

export default {
  name: 'App',
  components: {
    Pagination
  },
  data() {
    return {
      total: 100,
      list: []
    }
  },
  methods: {
    initData() {
      for (let i = 1; i <= this.total; i++) {
        this.list.push({
          id: i,
          text: `第 ${i} 条数据`
        })
      }
    },
    handlePageChange(page) {
      const start = (page - 1) * this.pageSize
      const end = start + this.pageSize > this.total ? this.total : start + this.pageSize
      this.list = []
      for (let i = start + 1; i <= end; i++) {
        this.list.push({
          id: i,
          text: `第 ${i} 条数据`
        })
      }
    }
  },
  created() {
    this.initData()
  }
}
</script>

<style>
.container {
  margin: 0 auto;
  width: 500px;
}

ul {
  padding: 0;
  list-style: none;
}

li {
  border: 1px solid #eee;
  margin-top: 10px;
  padding: 10px;
}
</style>

登入後複製

在代码中，我们需要通过计算得到当前页展示的数据范围，并根据范围重新渲染数据列表。

3.运行并测试

最后，在命令行中运行“npm run serve”命令，启动开发服务器，并在浏览器中访问http://localhost:8080/，即可看到页面展示了分页组件和数据列表。你可以尝试在页面上点击分页按钮，观察数据列表是否能够正确地切换页码。

以上就是使用组件实现分页的简单示例，在实际开发中，你可以根据项目的需求对分页组件的样式和属性进行自定义，进一步提升用户体验。

以上是VUE3開發入門教學：使用元件實作分頁的詳細內容。更多資訊請關注PHP中文網其他相關文章！