放置了静态的分页组件

src/components/index.vue

@@ -99,10 +99,31 @@
 <!--                  <div @click="pageArticles()" class="pagination" v-if="pagination.total !== articles.length">-->
 <!--                    下一页-->
 <!--                  </div>-->
+<!--                  <pagination-->
+<!--                    v-show="total>0"-->
+<!--                    :total="total"-->
+<!--                    :page.sync="queryParams.pageNum"-->
+<!--                    :limit.sync="queryParams.pageSize"-->
+<!--                    @pagination="getList"-->
+<!--                  />-->
+
 
                 </div>
-                <div  style="user-select: none;text-align: center">
-                  ~~到底啦~~
+<!--                <div  style="user-select: none;text-align: center">-->
+<!--                  ~~到底啦~~-->
+<!--                </div>-->
+
+                <!--分页组件-->
+                <div class="block">
+                  <el-pagination
+                    @size-change="handleSizeChange"
+                    @current-change="handleCurrentChange"
+                    :current-page="currentPage4"
+                    :page-sizes="[100, 200, 300, 400]"
+                    :page-size="100"
+                    layout="total, sizes, prev, pager, next, jumper"
+                    :total="400">
+                  </el-pagination>
                 </div>
               </template>
 
@@ -141,6 +162,10 @@
 
     data() {
       return {
+        currentPage1: 5,
+        currentPage2: 5,
+        currentPage3: 5,
+        currentPage4: 4,
         loading: false,
         showAside: true,
         printerInfo: "你看对面的青山多漂亮",
@@ -176,14 +201,18 @@
     created() {
       this.getGuShi();
       this.getArticles();
+      this.getList();
     },
 
     mounted() {
     },
 
     methods: {
-      created() {
-        this.getList();
+      handleSizeChange(val) {
+        console.log(`每页 ${val} 条`);
+      },
+      handleCurrentChange(val) {
+        console.log(`当前页: ${val}`);
       },
       /** 搜索按钮操作 */
       handleQuery() {