From 979c7c817b2e7d2430ac447b10f943c12dac3b64 Mon Sep 17 00:00:00 2001 From: 叶松 <2217086471@qq.com> Date: 星期四, 26 十月 2023 11:32:01 +0800 Subject: [PATCH] Merge branch 'master' of http://111.30.93.211:10101/r/supipe --- web/src/components/element/Pagination.vue | 158 +++++++++++++++++++++++++++------------------------- 1 files changed, 81 insertions(+), 77 deletions(-) diff --git a/web/src/components/element/Pagination.vue b/web/src/components/element/Pagination.vue index 46cfa39..2450444 100644 --- a/web/src/components/element/Pagination.vue +++ b/web/src/components/element/Pagination.vue @@ -1,78 +1,82 @@ -<template> - <div class="pagination-container"> - <el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange" :page-sizes="[10, 20, 30]" - :total="total" :current-page="pageNum" :page-size="pageSize" - layout="total, sizes, prev, pager, next, jumper"></el-pagination> - </div> -</template> -<script> -export default { - name: "pagination", - data() { - return {}; - }, - props: { - // 总页数 - total: { - type: Number, - }, - // 当前页 - pageNum: { - type: Number, - }, - // 每页显示条数 - pageSize: { - type: Number, - }, - }, - methods: { - // 当前页码变化 - handleCurrentChange(val) { - this.$emit("change-page-num", val); - }, - // 每页查看条数变化 - handleSizeChange(val) { - this.$emit("change-page-size", val); - }, - }, - // watch: { - // pageSize: { - // // immediate: true, - // handler(newValue, oldValue) { - // this.page._pageSize = this.newValue; - // console.log("pageSize", newValue, oldValue); - // }, - // }, - // pageNum: { - // // immediate: true, - // handler(newValue, oldValue) { - // this.page._currentPage = newValue; - // console.log("pageNum", newValue, oldValue); - // }, - // }, - // }, -}; -</script> -<style lang="scss" scoped> -// 主体底部样式 -::v-deep.el-pagination .btn-prev, -::v-deep.el-pagination .btn-next, -::v-deep.el-pagination .el-pager li { - background-color: rgba(20, 25, 58, 0.4); - border: 1px solid rgba(255, 255, 255, 0.12); - font-weight: 400; - color: #E2E4E9; - border-radius: 4px; -} - -::v-deep.el-pagination .el-pager li:not(.disabled).active { - color: #fff; - border: 1px solid #39B5FE; - background-color: #0B3562; - font-weight: 400; -} - -.pagination-container { - margin-top: 30px; -} +<template> + <div class="pagination-container"> + <el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange" :page-sizes="[10, 20, 30]" + :total="total" :current-page="pageNum" :page-size="pageSize" + layout="total, sizes, prev, pager, next, jumper"></el-pagination> + </div> +</template> +<script> +export default { + name: "pagination", + data() { + return {}; + }, + props: { + // 总页数 + total: { + type: Number, + }, + // 当前页 + pageNum: { + type: Number, + }, + // 每页显示条数 + pageSize: { + type: Number, + }, + }, + methods: { + // 当前页码变化 + handleCurrentChange(val) { + this.$emit("change-page-num", val); + }, + // 每页查看条数变化 + handleSizeChange(val) { + this.$emit("change-page-size", val); + }, + }, + // watch: { + // pageSize: { + // // immediate: true, + // handler(newValue, oldValue) { + // this.page._pageSize = this.newValue; + // console.log("pageSize", newValue, oldValue); + // }, + // }, + // pageNum: { + // // immediate: true, + // handler(newValue, oldValue) { + // this.page._currentPage = newValue; + // console.log("pageNum", newValue, oldValue); + // }, + // }, + // }, +}; +</script> +<style lang="scss" scoped> +.el-pagination { + text-align: right; +} + +// 主体底部样式 +::v-deep.el-pagination .btn-prev, +::v-deep.el-pagination .btn-next, +::v-deep.el-pagination .el-pager li { + background-color: rgba(20, 25, 58, 0.4); + border: 1px solid rgba(255, 255, 255, 0.12); + font-weight: 400; + color: #E2E4E9; + border-radius: 4px; +} + +::v-deep.el-pagination .el-pager li:not(.disabled).active { + color: #fff; + border: 1px solid #39B5FE; + background-color: #0B3562; + font-weight: 400; +} + +.pagination-container { + margin: 30px 0; +} </style> \ No newline at end of file -- Gitblit v1.9.3