|
@@ -0,0 +1,61 @@
|
|
|
+<template>
|
|
|
+ <div id="pagination">
|
|
|
+ <el-row type="flex" align="middle" style="padding-top:1rem">
|
|
|
+ <el-col :span="24" :style="`text-align:${position};`">
|
|
|
+ <p>
|
|
|
+ <span class="newpage">
|
|
|
+ 跟帖<span class="gentie">{{ total }}</span></span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ ><el-pagination background layout=" total, prev, pager, next" :page-size="limit" :current-page.sync="currentPage" @current-change="changePage">
|
|
|
+ </el-pagination
|
|
|
+ ></span>
|
|
|
+ </p>
|
|
|
+ <!--
|
|
|
+ :page-sizes="[5, 10, 15, 20, 50, 100]"
|
|
|
+ @size-change="sizeChange"
|
|
|
+ -->
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import _ from 'lodash';
|
|
|
+export default {
|
|
|
+ name: 'pagination',
|
|
|
+ props: {
|
|
|
+
|
|
|
+ position: { type: String, default: 'right' },
|
|
|
+ total: { type: Number, default: 0 },
|
|
|
+ limit: { type: Number, default: 10 },
|
|
|
+ },
|
|
|
+ components: {},
|
|
|
+ data: () => {
|
|
|
+ return {
|
|
|
+ currentPage: 1,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {},
|
|
|
+ methods: {
|
|
|
+ changePage(page) {
|
|
|
+ this.$emit('query', { skip: (page - 1) * this.limit, limit: this.limit });
|
|
|
+ },
|
|
|
+ sizeChange(limit) {
|
|
|
+ this.limit = limit;
|
|
|
+ this.$emit('query', { skip: 0, limit: this.limit });
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.newpage {
|
|
|
+ width: 92%;
|
|
|
+ float: left;
|
|
|
+}
|
|
|
+.gentie {
|
|
|
+ color: red;
|
|
|
+ font-size: 20px;
|
|
|
+}
|
|
|
+</style>
|