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，你可以看看