新增最新资讯分页

src/views/college/detail.vue

@@ -3,6 +3,7 @@
     <div class="container">
         <div class="row">
             <div class="col-12 my-4" v-if="article">
+				<!-- v-if="cid == 18||cid == 21||cid == 22||cid == 32" -->
                 <el-breadcrumb separator-class="el-icon-arrow-right">
                     <el-breadcrumb-item :to="{ path: `/college/list/18` }">{{$t('college.college')}}</el-breadcrumb-item>
                     <el-breadcrumb-item :to="{ path: `/college/list/${cid}`}">{{article.category_name}}</el-breadcrumb-item>
@@ -19,6 +20,7 @@
                     <div class="col-12">
                         <div class="title h3 my-4">{{$t('college.recommendedCourse')}}</div>
                         <div class="row justify-content-between">
+							<!-- v-if="cid == 18||cid == 21||cid == 22||cid == 32" -->
                             <div class="item col-lg-3 col-md-6 mb-4 col-xs-12" v-for="(item,index) in recommend" :key="index">
                                 <router-link :to="`/college/detail/${item.category_id}/${item.id}`">
                                     <div class="banner">

src/views/college/latestnews.vue

@@ -20,10 +20,11 @@
 
                 <!-- <div class="title h3 my-4">{{title}}</div> -->
                 <div class="row justify-content-between" style="margin-top: 20px;">
-                    <router-link :to="`/college/detail/${cid}/${item.id}`" class="item col-lg-3 col-md-6 mb-4 col-xs-12" v-for="(item,index) in articleList" :key="index">
+                    <router-link :to="`/college/detail/${cid}/${item.id}`" class="item col-lg-3 col-md-6 mb-4 col-xs-12" 
+					v-for="(item,index) in articleList.slice((currentPage - 1) * pagesize,currentPage * pagesize)" :key="index">
                         <div class="banner">
                             <!-- <img src="http://iph.href.lu/260x150" alt /> -->
-                            <img :src="item.full_cover" alt />
+                            <img :src="item.full_cover" alt v-if="item.full_cover !== ''" />
                         </div>
                         <div class="txt">
                             {{item.title}}
@@ -32,6 +33,17 @@
                         <div class="txt2">{{item.updated_at}}</div>
                     </router-link>
                 </div>
+				<div class="p-2" style="width: 100%;">
+					<!-- 
+						@size-change //  pageSize 改变时会触发 每页条数
+						@current-change //  currentPage 改变时会触发 当前页
+						:current-page //  默认false,当前页数
+						:page-size //当前行显示多少数据
+						:total // 总条目数,一般从展示列表的总数获取
+					-->
+					<el-pagination layout="prev, pager, next" :page-size="pagesize" :total="articleList.length"
+					:current-page="currentPage" @current-change="handleCurrentChange"></el-pagination>
+				</div>
             </div>
         </div>
     </div>
@@ -47,6 +59,9 @@ export default {
             cid: this.$route.params.cid,
             articleList: [],
             itemList: [],// 二级导航
+			// total:10,
+			pagesize:4,
+			currentPage:1
         }
     },
     computed: {
@@ -81,7 +96,6 @@ export default {
         getArticleList() {
             College.getArticleList(this.cid).then(data => {
                 this.articleList = data;
-
             }).catch();
         },
         getCollegeLinks() {
@@ -93,8 +107,11 @@ export default {
                     })
                 })
             }).catch(err => {});
-           
         },
+		// 显示第几页
+		handleCurrentChange(currentPage) {
+			this.currentPage = currentPage;
+		}
     },
     watch: {
         $route() {
@@ -170,5 +187,8 @@ export default {
     color: #fff !important;
     /* 写进去，有效代码 */
 }
-
+/deep/ .el-pagination{
+	display: flex;
+	justify-content: center;
+}
 </style>