vue的分页我一共获取了total=12条数据每页设置显示10条，为什么点击第二个页码的时候是没有

Question

<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: [], //表格显示数据  allData: [], //总数据}},**获取数据**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获取数据到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: '数据 error',      type: 'warning'    })  });}, 页码点击事件methods:{handleCurrentChange(val) {  //当前页  console.log(val);  this.tableData = this.allData.slice((val - 1) * 10, 10 * val);}}

Answer 1

1. 找你们后端，如果是做前端分页让他返回所有数据，也很可能是后端分页而你们没对清楚接口

   response.data.data.list.forEach(function(item){
        ...
        console.log(that.total);//打印了10次12 意思是list长度本来就是10});

2. 为什么要在list.forEach里面push，如果你只是想格式化数组用map。更不要在forEach里重复的执行无用的 that.total = ...和 that.tableData = ...，10次循环前面9次都是无用的赋值。

Answer 2

切换到第二页的时候，检查下tableData是不是剩下的那两条数据

Answer 3

------------ update

撤回之前的回答， 我看错了。汗

会不会接口返回的就是 10条数据？

Answer 4

看一下你的allData是多少条数据

Answer 5

应该后台接口有问题，total和list不匹配