In vue, I want to use the paging component of el to achieve a function, that is, click on the page number page on the second page to render the data on the second page, how to achieve? Thank you very much for your earnest instruction!

<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>
Mar.13,2021

previously wrote a small demo , you can see


encapsulate $http.get into a method to get page n, execute this method when you click, replace this.newsList with new data, and then change the page number to that page.

Menu