页面中数据过多,我们可以使用分页来展示,这样可以提高加载速度。
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
background
:total="total"
:page-sizes="[10, 20, 30, 40]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
>
</el-pagination>
......
export default {
data(){
return {
total:0;//总条数
pageSize:10;//每条显示数量
currentPage:1;//在哪一页
}
},
created(){
this.getInitList()
},
methods:{
async getInitList(){
//掉接口获取所有数据,赋值给总条数
const {data} = getInitList()
this.total = res.total
},
//进入选中的页
handleCurrentChange(val){
this.currentPage = val
this.getInitList()
},
//每页条数选择
handleSizeChange(val){
this.pageSize = val
this.getInitList()
}
}
}