vue里我用el的分页组件想实现一个功能，就是点击第二页的页码页面上渲染上第二页的数据，该怎么实现？

Question

<template>

  <el-main>

    <h1>学校通知</h1>

                             **// 渲染的数据页面**

    <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:{}

    }

  },

                           **//从后台获取的信息**

  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: '数据 error',

          type: 'warning'

        })

      });

  },

  methods:{

    handleCurrentChange(val) {

      this.currentPage = val;

      console.log(`当前页: ${val}`);

    }

  }

}

</script>

Answer 1

之前写过一个小demo，你可以看看