98 lines
1.7 KiB
Vue
98 lines
1.7 KiB
Vue
<template>
|
|
<div class="container-custom">
|
|
<div class="wrapper_1260">
|
|
<div class="pagination_box">
|
|
<b-pagination-nav
|
|
size="lg"
|
|
v-model="currentPage"
|
|
:link-gen="linkGen"
|
|
:number-of-pages="numberOfPages"
|
|
use-router>
|
|
</b-pagination-nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "seo-pagination",
|
|
data() {
|
|
return {
|
|
currentPage: 1,
|
|
queryStr: ''
|
|
};
|
|
},
|
|
props: {
|
|
total: {
|
|
default: 99
|
|
},
|
|
pageNum : {
|
|
default: 1
|
|
},
|
|
rows: {
|
|
default: 10
|
|
},
|
|
pageKey: {
|
|
type: String,
|
|
default: 'pageNum'
|
|
},
|
|
},
|
|
watch: {
|
|
'$route': {
|
|
handler(val) {
|
|
this.currentPage = val.query[this.pageKey] || 1
|
|
this.queryStr = ''
|
|
for (let key in val.query) {
|
|
if (key!==this.pageKey) {
|
|
this.queryStr = `${this.queryStr}&${key}=${val.query[key]}`
|
|
}
|
|
}
|
|
},
|
|
deep: true,
|
|
immediate: true
|
|
}
|
|
},
|
|
computed: {
|
|
numberOfPages() {
|
|
if (!this.total) {
|
|
return 1
|
|
}
|
|
return Math.ceil(this.total / this.rows)
|
|
}
|
|
},
|
|
methods: {
|
|
linkGen(pageNum) {
|
|
return `?${this.pageKey}=${pageNum}${this.queryStr || ''}`
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.container-custom {
|
|
background-color: transparent !important;
|
|
}
|
|
.pagination_box {
|
|
width: 100%;
|
|
margin-bottom: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.total_box {
|
|
margin-right: 15px;
|
|
color: #606266;
|
|
font-size: 14px;
|
|
}
|
|
>nav {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
::v-deep .el-input {
|
|
width: 70px;
|
|
margin: 0 4px;
|
|
}
|
|
}
|
|
</style>
|