效果图:
使用组件:
<template>
<div>
<!-- 记录 -->
<section class="balances-record_list-container">
<el-tabs>
<!-- tonArray需要后台请求数据赋值 ,我没有写请求过程-->
<!-- 最重要的一点,就是要使用slice() 方法!!!这样数据才会根据你点击的页码来 显示条数!!-->
<!-- slice() 方法可从已有的数组中返回选定的元素。 -->
<BalancesRecordTable
has-action
:info="tonArray.slice((pageNum-1)*pageSize,pageNum*pageSize)"
></BalancesRecordTable>
</el-tabs>
</section>
<!-- 添加分页 -->
<div v-show="total">
<el-pagination
class="page"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
:page-size="10"
layout="total, prev, pager, next"
:total="total"
></el-pagination>
</div>
</div>
</template>
<script>
export default {
data() {
return {
tonArray: [], //辨别数组
pageNum: 1, //接口固定数
pageSize: 10, //接口固定数，每页条数
currentPage: 1, //分页焦点页码
total: 0, //分页总条数
};
},
methods: {
// 分页功能
handleSizeChange(val) {
// console.log(`每页 ${val} 条`);
this.pageSize = val;
},
handleCurrentChange(val) {
// console.log(`当前页: ${val}`);
this.pageNum = val;
},
},
};
</script>
