Rumah > Artikel > hujung hadapan web > Bagaimana untuk melaksanakan komponen paging dalam Vue?
Vue ialah rangka kerja bahagian hadapan yang sangat baik Apabila memproses sejumlah besar data, komponen halaman adalah penting. Komponen penomboran boleh menjadikan halaman lebih kemas dan juga meningkatkan pengalaman pengguna. Dalam Vue, melaksanakan komponen paging tidak rumit Artikel ini akan memperkenalkan cara Vue melaksanakan komponen paging.
1. Analisis keperluan
Sebelum melaksanakan komponen paging, kita perlu menganalisis keperluan. Komponen asas halaman perlu mempunyai fungsi berikut:
2. Langkah-langkah pelaksanaan
Untuk memudahkan pengurusan, kami membahagikan komponen paging kepada tiga fail:
export default { props: { currentPage: { // 当前页码 type: Number, required: true }, total: { // 总记录数 type: Number, required: true }, perPage: { // 每页展示条数 type: Number, required: true } }, data () { return { pages: Math.ceil(this.total / this.perPage), // 总页数 pageList: [] // 存储当前页面展示的页码 } }, mounted () { this.getPageList(this.currentPage) } }
<template> <li :class="{ active: active }"> <a @click.prevent="handleClick" href="#"> {{ label }} </a> </li> </template> <script> export default { props: { label: { // 按钮上的数字或图标 required: true }, pageNum: { // 按钮代表的页码 required: true }, active: { // 判断按钮是否处于激活状态 default: false } }, methods: { // 点击分页按钮时触发 handleClick () { this.$emit('change', this.pageNum) } } } </script>Dalam Pagination.vue, kita perlu menggunakan arahan v-for untuk menghasilkan berbilang komponen PaginationItem.vue. Bilangan halaman hendaklah dijana mengikut peraturan tertentu Untuk peraturan ini, anda boleh merujuk kepada kod berikut:
methods: { // 获取当前页显示的页码 getPageList (currentPage) { let pageList = [] // 存储页码数据 const totalPages = this.pages // 总页数 const visiblePages = 5 // 按钮可见的页码数 const half = Math.floor(visiblePages / 2) // 可见页码数的一半 // 如果总页数小于可显示页数 if (totalPages <= visiblePages) { for (let i = 1; i <= totalPages; i++) { pageList.push(i) } } else { // 如果当前页码小于或等于可见页码数的一半 if (currentPage <= half) { for (let i = 1; i <= visiblePages; i++) { pageList.push(i) } } else if (currentPage >= totalPages - half) { // 如果当前页码大于等于最后一页减去可见页码数的一半 for (let i = totalPages - visiblePages + 1; i <= totalPages; i++) { pageList.push(i) } } else { for (let i = currentPage - half; i <= currentPage + half; i++) { pageList.push(i) } } } this.pageList = pageList } }
methods: { // 点击页码时触发 handlePageChange (pageNum) { // 如果页码为负数或者大于总页数都停止执行 if (pageNum <= 0 || pageNum > this.pages) return this.currentPage = pageNum this.$emit('change-page', pageNum) // 事件广播向父组件传值 this.getPageList(pageNum) }, // 增加当前页码 nextPage () { if (this.currentIndex < this.pages - 1) { this.currentPage++ this.getPageList(this.currentPage) this.$emit('change-page', this.currentPage) // 事件广播向父组件传值 } } }, computed: { currentIndex () { // 当前页码所在的索引 return this.currentPage - 1 } }
<template> <div class="select-per-page"> <select :value="perPage" @change="changePerPage"> <option v-for="item in items" :value="item">{{ item }}</option> </select> </div> </template> <script> export default { props: { perPage: { // 每页展示条数 type: Number, required: true }, options: { // 可选的条数设置 type: Array, default () { return [10, 20, 30, 50] } } }, computed: { items () { return this.options.map(option => `${option} 条`) } }, methods: { // 切换每页展示的条数 changePerPage (event) { const perPage = +event.target.value.replace(/[D]/g, '') this.$emit('update:perPage', perPage) this.$emit('change-per-page', perPage) // 事件广播向父组件传值 } } } </script>Di atas adalah semua kandungan Vue untuk melaksanakan komponen paging. Kita perlu memperkenalkan Pagination.vue dalam komponen induk, dan kemudian lulus parameter yang sepadan seperti currentPage, total dan perPage. Dengan cara ini, komponen paging boleh guna semula boleh dilaksanakan, yang meningkatkan kecekapan dan pengalaman pembangunan pembangunan bahagian hadapan.
Atas ialah kandungan terperinci Bagaimana untuk melaksanakan komponen paging dalam Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!