<template>
<!-- 分页 -->
<div class="flex justify-center page">
<div class="content" style="margin-top: 20px">
<el-table :data="showList" border style="width: 100%">
...
</div>
<div class="block" style="margin-top: 20px">
<!-- <span class="demonstration">大于 7 页时的效果</span> -->
<el-pagination
layout="prev, pager, next"
:total="tableData.length"
:page-size="pagesize"
@current-change="current_change"
:current-page.sync="currentPage"
>
</el-pagination>
</div>
</div>
</template>
<script>
import axios from "axios";
export default {
name:'ListShow',
data(){
return{
tableData: [],
pagesize: 7, //每页多少数据
currentPage: 1, //默认当前页为第一页
}
},
methods:{
current_change(currentPage){ //改变当前页
this.currentPage = currentPage
}
},
computed:{
//根据当前页码所展示的数据
showList(){
//slice为数组一个方法,结果是从已有数组返回指定位置的数组,参数为起始下标和结束下标
return this.tableData.slice((this.currentPage-1)*this.pagesize,this.currentPage-1+this.pagesize)
}
},
}
</script>
重点在computed,这个算vue实例的一个属性,和data,methods,onLoad这些同级。意思是’计算参数’