vue+ElementUI——表格分页（前端实现方法）

话不多说，直接上代码！！！！

<template>
	<div class="list">
		<div class="tab">
			<el-table
				:data="tableData"
				border
				style="width: 100%">
				<el-table-column
					type="index"
					label="序号"
					align='center'
					sortable
					width="70">
				</el-table-column>
				<el-table-column
					label="标签ID"
					align='center'
					width="120">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{ scope.row.lable_id }}</span>
					</template>
				</el-table-column>
				<el-table-column
					label="货物类型"
					align='center'
					width="80">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{ scope.row.goods_name }}</span>
					</template>
				</el-table-column>
				<el-table-column
					label="创建人"
					align='center'
					width="200">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{ scope.row.create_name }}</span>
					</template>
				</el-table-column>
				<el-table-column
					label="分配用户"
					align='center'
					width="180">
					<template slot-scope="scope">
						
						<span style="margin-left: 10px">{{ scope.row.username }}</span>
					</template>
				</el-table-column>
				<el-table-column
					label="创建时间"
					align='center'>
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{ scope.row.create_time }}</span>
					</template>
				</el-table-column>
				<el-table-column
					label="更新时间"
					align='center'>
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{ scope.row.update_time }}</span>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="page">
			<el-pagination
			  @size-change="handleSizeChange"
			  @current-change="handleCurrentChange"
			  :current-page="paginations.page_index"
			  :page-sizes="paginations.page_sizes"
			  :page-size="paginations.page_size"
			  :layout="paginations.layout"
			  :total="paginations.total">
			</el-pagination>
		</div>
	</div>
</template>
<script>
import{lablelist} from '../../api/api.js'
	export default {
		name:"list",
		data() {
			return {
				tableData:[], //数据
				paginations:{
					page_index:1, //当前页
					total:0, //总数
					page_size:5, //一页显示多少
					page_sizes:[5,10,15,20], //每页显示多少条
					layout:'total, sizes, prev, pager, next, jumper'
				},
				allTableData:[]
			}
		},
		methods: {
            lable_list() {
                var params = {
            };
            lablelist(params).then(res=>{
                console.log(res)
                const data = res;
                this.allTableData = data;
                this.setPaginations()
            })
            },
			setPaginations(){
				this.paginations.total = this.allTableData.length; //数据的数量
				this.paginations.page_index = 1; //默认显示第一页
				this.paginations.page_size = 5; //每页显示多少数据
				
				//显示数据
				this.tableData = this.allTableData.filter((item,index) => {
					return index < this.paginations.page_size;
				})
			},
			handleSizeChange(page_size) {
				this.paginations.page_index = 1; //第一页
				this.paginations.page_size = page_size; //每页先显示多少数据
				this.tableData = this.allTableData.filter((item,index) => {
					return index < page_size
				})
			},
			handleCurrentChange(page){
				// 跳转页数
				//获取当前页
				let index = this.paginations.page_size * (page -1);
				//获取总数
				let allData = this.paginations.page_size * page;
				
				let tablist=[];
				for(let i = index;i<allData;i++) {
					if (this.allTableData[i]) {
						tablist.push(this.allTableData[i])
					}
					this.tableData = tablist
				}
			}
		},
		created(){
			this.lable_list()
		}
	}
</script>

<style scoped>
	.list {
		margin: 20px;
	}
	.page {
		float: right;
		margin-top: 20px;
	}
</style>