呼啦一陣風(fēng)
2019-03-28 15:19:49
<template><el-main><h1>學(xué)校通知</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: [], //表格顯示數(shù)據(jù) allData: [], //總數(shù)據(jù)}},**獲取數(shù)據(jù)**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獲取數(shù)據(jù)到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: '數(shù)據(jù) error', type: 'warning' }) });}, 頁碼點(diǎn)擊事件methods:{handleCurrentChange(val) { //當(dāng)前頁 console.log(val); this.tableData = this.allData.slice((val - 1) * 10, 10 * val);}}
5 回答

莫回?zé)o
TA貢獻(xiàn)1865條經(jīng)驗(yàn) 獲得超7個(gè)贊
找你們后端,如果是做前端分頁讓他返回所有數(shù)據(jù),也很可能是后端分頁而你們沒對清楚接口
response.data.data.list.forEach(function(item){ ... console.log(that.total);//打印了10次12 意思是list長度本來就是10});
為什么要在
list.forEach
里面push
,如果你只是想格式化數(shù)組用map
。更不要在forEach
里重復(fù)的執(zhí)行無用的that.total = ...
和that.tableData = ...
,10次循環(huán)前面9次都是無用的賦值。

慕田峪7331174
TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超13個(gè)贊
------------ update
撤回之前的回答, 我看錯(cuò)了。汗
會(huì)不會(huì)接口返回的就是 10條數(shù)據(jù)?
添加回答
舉報(bào)
0/150
提交
取消