|
@@ -1,151 +1,154 @@
|
|
|
<template>
|
|
|
- <div :class="{'hidden':hidden}"
|
|
|
- class="pagination-container">
|
|
|
+ <div :class="{ hidden: hidden }" class="pagination-container">
|
|
|
<!-- :background="background" -->
|
|
|
- <el-pagination :current-page.sync="currentPage"
|
|
|
- size="mini"
|
|
|
- :page-size.sync="pageSize"
|
|
|
- :layout="layout"
|
|
|
- :page-sizes="pageSizes"
|
|
|
- :total="total"
|
|
|
- v-bind="$attrs"
|
|
|
- @size-change="handleSizeChange"
|
|
|
- @current-change="handleCurrentChange" />
|
|
|
+ <el-pagination
|
|
|
+ :current-page.sync="currentPage"
|
|
|
+ size="mini"
|
|
|
+ :page-size.sync="pageSize"
|
|
|
+ :layout="layout"
|
|
|
+ :page-sizes="pageSizes"
|
|
|
+ :total="total"
|
|
|
+ v-bind="$attrs"
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { scrollTo } from '@/utils/scroll-to'
|
|
|
-import { Searchs } from '@/helpers'
|
|
|
+import { scrollTo } from "@/utils/scroll-to";
|
|
|
+import { Searchs } from "@/helpers";
|
|
|
export default {
|
|
|
- name: 'Pagination',
|
|
|
+ name: "Pagination",
|
|
|
props: {
|
|
|
total: {
|
|
|
required: true,
|
|
|
- type: Number
|
|
|
+ type: Number,
|
|
|
},
|
|
|
page: {
|
|
|
type: Number,
|
|
|
- default: 1
|
|
|
+ default: 1,
|
|
|
},
|
|
|
limit: {
|
|
|
type: Number,
|
|
|
- default: 10
|
|
|
+ default: 10,
|
|
|
},
|
|
|
pageSizes: {
|
|
|
type: Array,
|
|
|
- default () {
|
|
|
- return [10, 20, 30, 50]
|
|
|
- }
|
|
|
+ default() {
|
|
|
+ return [10, 20, 30, 50];
|
|
|
+ },
|
|
|
},
|
|
|
layout: {
|
|
|
type: String,
|
|
|
- default: 'total,sizes,prev, pager, next, jumper'
|
|
|
+ default: "total,sizes,prev, pager, next, jumper",
|
|
|
},
|
|
|
background: {
|
|
|
type: Boolean,
|
|
|
- default: true
|
|
|
+ default: true,
|
|
|
},
|
|
|
autoScroll: {
|
|
|
type: Boolean,
|
|
|
- default: true
|
|
|
+ default: true,
|
|
|
},
|
|
|
hidden: {
|
|
|
type: Boolean,
|
|
|
- default: false
|
|
|
+ default: false,
|
|
|
},
|
|
|
sync: {
|
|
|
type: Boolean,
|
|
|
- default: false
|
|
|
+ default: false,
|
|
|
},
|
|
|
saveKey: {
|
|
|
type: String,
|
|
|
- default: ''
|
|
|
- }
|
|
|
+ default: "",
|
|
|
+ },
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- pageInformation: null
|
|
|
- }
|
|
|
+ pageInformation: null,
|
|
|
+ };
|
|
|
},
|
|
|
computed: {
|
|
|
currentPage: {
|
|
|
- get () {
|
|
|
- return this.page
|
|
|
+ get() {
|
|
|
+ return this.page;
|
|
|
+ },
|
|
|
+ set(val) {
|
|
|
+ this.$emit("update:page", val);
|
|
|
},
|
|
|
- set (val) {
|
|
|
- this.$emit('update:page', val)
|
|
|
- }
|
|
|
},
|
|
|
pageSize: {
|
|
|
- get () {
|
|
|
- return this.limit
|
|
|
+ get() {
|
|
|
+ return this.limit;
|
|
|
},
|
|
|
- set (val) {
|
|
|
- this.$emit('update:limit', val)
|
|
|
- }
|
|
|
- }
|
|
|
+ set(val) {
|
|
|
+ this.$emit("update:limit", val);
|
|
|
+ },
|
|
|
+ },
|
|
|
},
|
|
|
watch: {
|
|
|
currentPage() {
|
|
|
- this.syncStore()
|
|
|
+ this.syncStore();
|
|
|
},
|
|
|
pageSize() {
|
|
|
- this.syncStore()
|
|
|
- }
|
|
|
+ this.syncStore();
|
|
|
+ },
|
|
|
},
|
|
|
mounted() {
|
|
|
if (this.sync) {
|
|
|
- const searchs = new Searchs(this.saveKey || this.$route.path)
|
|
|
- const active = searchs.get()
|
|
|
- this.pageInformation = active
|
|
|
+ const searchs = new Searchs(this.saveKey || this.$route.path);
|
|
|
+ const active = searchs.get();
|
|
|
+ this.pageInformation = active;
|
|
|
if (active && active.page) {
|
|
|
for (const key in active.page) {
|
|
|
if (active.page.hasOwnProperty(key)) {
|
|
|
- const item = active.page[key]
|
|
|
- this.$emit('update:' + key, item)
|
|
|
+ const item = active.page[key];
|
|
|
+ this.$emit("update:" + key, item);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
if (this.saveKey) {
|
|
|
- searchs.update(this.$route.path, undefined, 'bind')
|
|
|
+ searchs.update(this.$route.path, undefined, "bind");
|
|
|
}
|
|
|
}
|
|
|
- window.addEventListener('watchStorage', this.watchStorage)
|
|
|
+ window.addEventListener("watchStorage", this.watchStorage);
|
|
|
},
|
|
|
methods: {
|
|
|
watchStorage() {
|
|
|
- let page = this.pageInformation && this.pageInformation.page ? this.pageInformation.page : null
|
|
|
- this.currentPage = page && page.page ? page.page : 1
|
|
|
-
|
|
|
+ let page =
|
|
|
+ this.pageInformation && this.pageInformation.page
|
|
|
+ ? this.pageInformation.page
|
|
|
+ : null;
|
|
|
+ this.currentPage = page && page.page ? page.page : 1;
|
|
|
},
|
|
|
syncStore() {
|
|
|
if (this.sync) {
|
|
|
- const searchs = new Searchs(this.saveKey || this.$route.path)
|
|
|
- searchs.update(this._props, undefined, 'page')
|
|
|
+ const searchs = new Searchs(this.saveKey || this.$route.path);
|
|
|
+ searchs.update(this._props, undefined, "page");
|
|
|
}
|
|
|
},
|
|
|
- handleSizeChange (val) {
|
|
|
- this.currentPage = 1
|
|
|
- this.$emit('pagination', { page: this.currentPage, limit: val })
|
|
|
+ handleSizeChange(val) {
|
|
|
+ this.currentPage = 1;
|
|
|
+ this.$emit("pagination", { page: this.currentPage, limit: val });
|
|
|
if (this.autoScroll) {
|
|
|
- scrollTo(0, 800)
|
|
|
+ scrollTo(0, 800);
|
|
|
}
|
|
|
- this.syncStore()
|
|
|
+ this.syncStore();
|
|
|
},
|
|
|
- handleCurrentChange (val) {
|
|
|
- this.$emit('pagination', { page: val, limit: this.pageSize })
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ this.$emit("pagination", { page: val, limit: this.pageSize });
|
|
|
if (this.autoScroll) {
|
|
|
- scrollTo(0, 800)
|
|
|
+ scrollTo(0, 800);
|
|
|
}
|
|
|
- this.syncStore()
|
|
|
- }
|
|
|
+ this.syncStore();
|
|
|
+ },
|
|
|
},
|
|
|
destroyed() {
|
|
|
- window.removeEventListener('watchStorage', this.watchStorage)
|
|
|
- }
|
|
|
-}
|
|
|
+ window.removeEventListener("watchStorage", this.watchStorage);
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
@@ -161,7 +164,7 @@ export default {
|
|
|
display: none;
|
|
|
}
|
|
|
/deep/.el-select {
|
|
|
- width: 100px!important;
|
|
|
- margin: 0 5px;
|
|
|
+ width: 100px !important;
|
|
|
+ margin: 0 5px;
|
|
|
}
|
|
|
</style>
|