vue-element-ui实现表格分页展示

本次数据采用的是本地数据导入的方式. 也可以通过请求API数据的方式.但是操作之前需要处理跨域.
此次案例使用的数据是https://www.layui.com/demo/table/user/?page=1&limit=1000.

<template>
	<div class="box">
		  <el-table
		       :data="tableData"
		       style="width: 100%"
			   >
		       <el-table-column
			   v-for= 'title in titles'
		         :prop="title"
		         :label="title"
		         width="180" border="1px solid #ccc">
		       </el-table-column>
			   
		       <el-table-column
		       				 fixed="left"
		       				 label="操作"
		       				 width="100">
		       				 <template slot-scope="scope">
		       				   <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
		       				   <el-button type="text" size="small">编辑</el-button>
		       				 </template>
		       </el-table-column>
		     </el-table>
			 
			<!-- 分页	 -->
			<div class="block">
				<el-pagination
				  @size-change="handleSizeChange"
				  @current-change="handleCurrentChange"
				  :current-page="currentPage"
				  :page-sizes="[10, 20, 30, 40]"
				  :page-size="pagesize"
				  layout="total, sizes, prev, pager, next, jumper"
				  :total="datatitle">
				</el-pagination>
			</div>
	</div>
</template>
<script>
	import ticket from '../data/ticket.json' //导入数据
	// console.log(ticket)
	export default{
		data(){
			return{
				titles:[ "id", "username", "sex", "city", "sign", "experience", "logins", "wealth", "classify", "score"],
				mydatas:ticket.data,
				tableData:ticket.data.slice(0,10),
				currentPage:1,
				pagesize:10,
				datatitle:0,
			}
		},
		
		methods: {
			gettotal(){
				this.datatitle = this.mydatas.length
			},
			changelist(){
				var x = (this.currentPage-1)*this.pagesize
				var y = this.currentPage*this.pagesize
				console.log(x,y)
				this.tableData = this.mydatas.slice(x,y)
			},
			handleSizeChange(val) {
				this.pagesize = val
				console.log(`每页 ${val} 条`);
				this.changelist()
			},
			handleCurrentChange(val) {
				this.currentPage = val
				console.log(`当前页: ${val}`);
				this.changelist()
			}
		},
		mounted() {
			this.gettotal()
		}
	}
</script>
<style>
	.box{
		margin:10px auto;
	}
</style>

运行效果