<template>
<el-main>

<h1>學校通知</h1>
<ul>
  <li v-for='news in tableData'><router-link :to="'/schoolnotice/'+news.newsID">{{news.title}}</router-link><span>{{news.publishTime}}</span></li>
</ul>
        **分頁**
<el-pagination
  layout="prev, pager, next"
  :total="total"
  :page-size="10"
  @current-change="handleCurrentChange"
>
</el-pagination>

</el-main>
</template>

<script>
export default {
data() {

return {
  newsList:[],
  total:{},
  tableData: [], //表格顯示數(shù)據(jù)
  allData: [], //總數(shù)據(jù)
}

},

                             **獲取數(shù)據(jù)**

mounted () {

const that = this;
console.log(that);
this.$http.get(
  that.$interface+'getArticlePages?categoryId=2'
)
  .then(function (response) {
    if(response.data.status === 1){
      response.data.data.list.forEach(function(item){
        that.allData.push({
          title:item.title,
          publishTime:item.publishdate,
          newsID:item.articleid,
        });
        that.total = response.data.data.total;
                    **從allData獲取數(shù)據(jù)到tableData** 
        that.tableData = that.allData.slice(0, 10);
        console.log(that.total);
      });
    }else{
      that.$message({
        message: response.data.msg,
        type: 'warning'
      });
    }
  })
  .catch(function (err) {
    console.log(err);
    that.$message({
      message: '數(shù)據(jù) error',
      type: 'warning'
    })
  });

}, 頁碼點擊事件
methods:{

handleCurrentChange(val) {  //當前頁
  console.log(val);
  this.tableData = this.allData.slice((val - 1) * 10, 10 * val);
}

}