本文主要是介绍VUE 页码分页封装，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
VUE 页码封装组件
pagination/index.vue ：
<template><div class="pagination-contianer"><el-pagination background layout="prev, pager, next" :total="total" @current-change="currentChange"> </el-pagination></div>
</template>
<script>
export default {name: 'Pagination',props: {total: {type: Number,default: 0}},methods: {currentChange(current) {this.$emit('trigger-event', current)}}
}
</script>
<style lang="stylus" scoped>
.pagination-contianer {margin-top: 10px;text-align: right;
}/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {background-color: #387dff !important;color: #FFF;
}/deep/ .el-pagination.is-background .el-pager li {background-color: #1c1e22 !important;
}
/deep/ .el-pagination .btn-next, .el-pagination .btn-prev {background-color: #1c1e22 !important;
}
/deep/ .el-pagination.is-background .btn-prev {background-color: #1c1e22 !important;
}
</style>
table表页面，看文件结构：
views/defects/ index.vue 代码：
<template><div class="project-container"><div class="table"><DefectList :defect-list="keyword ? filterDefectList : defectList" :total="fetchListPageData.total" :on-page-change="pageChange" /></div></div>
</template><script lang="ts">
import Vue from 'vue'
import DefectList from './components/DefectList.vue'export default Vue.extend({name: 'Index',components: {DefectList// TypeIcon},data() {return {defectList: [],filterDefectList: [],placeholderWords: '搜索缺陷',keyword: '',fetchListPageData: {total: 0,page: 1,pageSize: 10}}},watch: {keyword(newVal) {const keyVal = newVal.replace(' ', '')this.filterDefectList = keyVal ? this.defectList.filter(item => item.title.includes(keyVal)) : this.defectList}},created() {this.getDefectList()},methods: {async getDefectList() {try {const res = await API.Defect.defectListData({keyword: '',page: this.fetchListPageData.page,pageSize: this.fetchListPageData.pageSize})this.defectList = res.data.listthis.fetchListPageData.total = res.data.total} catch (error) {warn(error, true)}},pageChange(current: number) {this.fetchListPageData.page = currentthis.getDefectList()}}
})
</script><style lang="stylus" scoped>
.project-container {.project-name {img {position: relative;top: 3px;}}
}
</style>DefectList.vue
<template><div><div style="position: relative; transition: all ease 0.5s"><div class="block"><Pagination popper-class="sizes" :total="total" @trigger-event="getCurrentPageNum" /></div></div></div>
</template><script lang="ts">
import Vue from 'vue'
import Pagination from '@/components/Pagination/index.vue'export default Vue.extend({components: {Pagination},props: {total: {type: Number,default: 0},onPageChange: {type: Function,default: () => {}}},data() {return {}},methods: {getCurrentPageNum(current: number) {this.onPageChange(current)}}
})
</script>
这篇关于VUE 页码分页封装的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
