1、<template>
<template> <div style="margin-left: 5px;text-align: left;"> <Table :data="tableData" :columns="tableColumns" stripe style="margin-top: 5px;"></Table> <div style="margin: 10px;overflow: hidden"> <div style="float: right;"> <Page :total="totleCounts" :current="PageIndex" :page-size="pageSize" @on-change="changePage" show-sizer show-total :page-size-opts="[10,30, 50]" @on-page-size-change="changeSize"></Page> </div> </div> </div> </template>其中<Table>中，tableData：要显示的数据，tableColumns：表格的表头显示内容
<Page>中，totleCounts：总行数，PageIndex：当前页数，PageSize：页面显示数，changePage方法：改变当前页数执行的方法，show-sizer：显示可修改页面显示数的组件，changeSize方法：改变当前页面显示数时执行的方法
2、<script>
<script> export default { data () { return { totleCounts:0,//总条数 PageIndex:1,//当前页数 pageSize:10,//显示行数 tableData: [], totalArr:[], tableColumns: [ { title: '角色名称', key: 'tRoleName' }, { title: '添加时间', key: 'tCreateDate', }, { title: '操作', key: '', align:'center', render: (h, params) => { return h('div', [ h('Button', { props: { type: 'success', size: 'small' }, style: { marginRight: '5px' }, on: { click: () => { this.$Message.info(params.index) } } }, '修改'), h('Button', { props: { type: 'error', size: 'small' }, on: { click: () => { this.remove(params.index) } } }, '删除') ]); } } ] } }, created: function() { this.getDatas(1,10); }, methods:{ changePage (index) {//改变页数 this.pageIndex=index; var _start = ( this.pageIndex - 1 ) * this.pageSize; //pageIndex 第几页 pageNum:每页几条数据 var _end = this.pageIndex * this.pageSize; this.tableData = this.tableData .slice(_start,_end); this.getDatas(index,this.pageSize); }, changeSize(size){//改变页面显示数 this.pageSize=size; var _start = ( this.pageIndex - 1 ) * this.pageSize; //pageIndex 第几页 pageNum:每页几条数据 var _end = this.pageIndex * this.pageSize; this.tableData = this.tableData .slice(_start,_end);//slice() 方法可从已有的数组中返回选定的元素 this.getDatas(this.pageIndex,size); }, getDatas(index,size){//获取后台数据 var _this = this; this.$axios({ url: '', method: 'post', data: {PageIndex:index,pageSize:size} }).then(res => { if (res.data.type == 1) { _this.totleCounts = res.data.count;//总行数 _this.tableData = res.data.data; var _start = ( this.pageIndex - 1 ) * this.pageSize; //pageIndex 第几页 pageNum:每页几条数据 var _end = this.pageIndex * this.pageSize; } else { _this.$Message.error(res.data.msg); } //console.info("后台返回数据",res.data) }).catch(err => { //console.info("报错",err.response.message); }) } } } </script>3、执行效果
