分页

src/components/newsList.vue

@@ -15,7 +15,7 @@
             <listLeft v-if="sideMenu" :sideMenu="sideMenu" :Color="Color"></listLeft>
           </el-col>
           <el-col :span="listSpan" class="mainList">
-            <newsInfo :newsList="newsList" :Color="Color" :title="title"></newsInfo>
+            <newsInfo :newsList="newsList" :Color="Color" :title="title" v-on="$listeners" v-bind="$attrs"></newsInfo>
           </el-col>
         </div>
       </el-col>

src/layout/list/newsInfo.vue

@@ -35,14 +35,7 @@
         </el-col>
       </el-col>
       <el-col :span="24" class="page">
-        <el-pagination
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-          :current-page="currentPage4"
-          :page-size="8"
-          layout="total, prev, pager, next, jumper"
-          :total="1"
-        >
+        <el-pagination @current-change="search" :current-page="currentPage" :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="total">
         </el-pagination>
       </el-col>
     </el-row>
@@ -56,15 +49,20 @@ export default {
     newsList: null,
     Color: null,
     title: { type: String, default: '就业动态' },
+    total: { type: Number, defaultl: 0 },
   },
   components: {},
   data: () => ({
-    title: '就业动态',
-    currentPage4: 1,
+    currentPage: 1,
+    pageSize: 8,
   }),
   created() {},
   computed: {},
   methods: {
+    search(page) {
+      let skip = (page - 1) * this.pageSize;
+      this.$emit('search', { skip: skip, limit: this.pageSize });
+    },
     handleSizeChange(val) {
       console.log(`每页 ${val} 条`);
     },

src/views/newsList.vue

@@ -1,6 +1,16 @@
 <template>
   <div id="newsList">
-    <list-detail :menuList="menu" :info="site" :backColor="backColor" :Color="Color" :newsList="newsList" :sideMenu="sideMenu" :title="title"></list-detail>
+    <list-detail
+      :menuList="menu"
+      :info="site"
+      :backColor="backColor"
+      :Color="Color"
+      :newsList="newsList"
+      :sideMenu="sideMenu"
+      :title="title"
+      @search="toGetNews"
+      :total="total"
+    ></list-detail>
   </div>
 </template>
 
@@ -34,6 +44,7 @@ export default {
     backColor: '#0457c7',
     Color: '#0457c7',
     newsList: [],
+    total: 0,
     menu: [],
     sideMenu: [],
     site: {},
@@ -145,13 +156,14 @@ export default {
       }
     },
     //请求数据
-    async toGetNews() {
-      let result = await this.getNews({ type: 'list', data: { parent_id: this.id } });
+    async toGetNews({ skip = 0, limit = 8 } = {}) {
+      let result = await this.getNews({ type: 'list', data: { parent_id: this.id, skip: skip, limit: limit } });
       if (result.errcode === 0) {
         let data = result.data;
         for (const item of data) {
           let info = await this.getNews({ type: 'fetch', data: { id: item.id } });
           if (info.errcode === 0) item.content = info.data.content;
+          this.$set(this, `total`, result.total);
         }
         this.$set(this, `newsList`, result.data);
       }