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>