vue里我用el的分頁組件想實(shí)現(xiàn)一個(gè)功能，就是點(diǎn)擊第二頁的頁碼頁面上渲染上第二頁的數(shù)據(jù)，該怎么實(shí)現(xiàn)？（萬分感謝大佬們的諄諄教導(dǎo)！

<template>
  <el-main>
    <h1>學(xué)校通知</h1>
                             **// 渲染的數(shù)據(jù)頁面**
    <ul> 
      <li v-for='news in newsList'><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-page.sync="currentPage"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </el-main>
</template>

<script>
export default {
  data() {
    return {
      newsList:[],
      total:{}
    }
  },
                           **//從后臺(tái)獲取的信息**
  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.newsList.push({
              title:item.title,
              publishTime:item.publishdate,
              newsID:item.articleid,
            });
            that.total = response.data.data.total;
            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) {
      this.currentPage = val;
      console.log(`當(dāng)前頁: ${val}`);
    }
  }
}
</script>