HTML
<!-- 新闻内容 -->
<div id="app">
<section class="w news_list" v-for="e in dataShow">
<div class="list">
<ul>
<li>
<a :href="'news-details.html?id='+e.id" target="_blank">
<div class="img">
<div class="lozad">
<img style="width:100%;height: 301px;" :src="urls+e.pic">
</div>
</div> <span class="date"> {{e.dates}}</span>
<div class="txt"> <b class="t">{{e.title}}</b>
<div class="common_txt des">
{{e.description}}… </div>
<div class="more01"> <span>了解更多</span>
<div class="icon"> <svg role="img">
<use
xlink:href="../wp-content/themes/ruixin/assets/dist/svg/icon.svg#arrow_more">
</use>
</svg> </div>
</div>
</div>
</a> </li>
</ul>
</div>
</section>
<div style="text-align: center;">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="currentPage" :page-sizes="[1, 5, 15, 30]" :page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper" :total="total" background prev-text="上一页"next-text="下一页">
</el-pagination>
</div>
</div>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data () {
return {
urls : 'http://www.hnszg.net',
rightsList: [],
totalPageData: [],
// 共几页
pageNum: 1,
// 每页显示数量
pageSize: 1,
// 当前显示页码
currentPage: 1,
// 总共多少条数据
total: 1,
// 当前要显示的数据
dataShow: [],
}
},
mounted () { },
methods: {
getData() {
axios.get('http://www.hnszg.net/admin/index/journalismm').then(res => {
this.ajaxcen = res.data[0];
// console.log(this.ajaxcen);
this.total = res.data[0].length;
// console.log(this.total);
this.rightsList = res.data[0];
this.calcPageData();
return;
}, res => {
console.log("error");
});
},
calcPageData() {
// 计算页数(根据后台数据的条数和每页显示数量算出一共几页,得0时设为1)
if (this.rightsList.length > 1) {
this.pageNum = Math.ceil(this.rightsList.length / this.pageSize) || 1;
console.log('总页数:', this.pageNum);
}
// 数据分组
for (let i = 0; i < this.pageNum; i++) {
// 每一页都是一个数组 形如 [['第一页的数据'],['第二页的数据'],['第三页数据']]
// 根据每页显示数量 将后台的数据分割到 每一页,假设pageSize为5， 则第一页是1-5条，即slice(0,5)，第二页是6-10条，即slice(5,10)...
this.totalPageData[i] = this.rightsList.slice(this.pageSize * i, this.pageSize * (i + 1));
}
// 获取到数据后显示第一页内容,数组下标是从0开始的，这里一定要减去1，不然会丢失一组数据
this.dataShow = this.totalPageData[this.currentPage - 1];
console.log(this.dataShow);
},
handleSizeChange(newPageSize) {
this.pageSize = newPageSize;
// 重新计算页数并分组
this.calcPageData();
},
handleCurrentChange(newPageNum) {
console.log('当前页码:', newPageNum);
this.currentPage = newPageNum;
// 这里仍然不要忘记减去1
this.dataShow = this.totalPageData[newPageNum - 1];
}
},
created: function() {
this.getData();
}
})
</script>
