VUE +ELementUi实现el-table表单的分页效果

1、HTML

<template>
<div class="block page text-center">
	<el-pagination
         background small
         :hide-on-single-page="true"
         @current-change="blockCurrentChange"
         :current-page.sync="blockPage.currentPage"
         :page-size="blockPage.size"
         layout="total, prev, pager, next"
         :total="blockPage.total"
         :pager-count="5"
         slot="blockPage">
	</el-pagination>
</div>
</template>

2、JS

<script>
export default {
	data () {
		return {
			blockData: [], // 通过接口获取到的数据
      		blockTableData: [], // 接口获取到的数据转化之后的表格数据
      		blockPage: { // 分页
        		currentPage: 1, // 当前页
        		size: 30, // 每页显示的条数
        		total: 0 // 数据总数
      		}
		}
	},
	methods: {
		blackFetchData() {
      		this.blockTableData= [] // 接口获取到的数据转化之后的表格数据
      		let data = this.blockData// 通过接口获取到的数据
      		let start = (this.blockPage.currentPage - 1) * this.blockPage.size
      		let end = this.blockPage.currentPage * this.blockPage.size
      		setTimeout(_ => {
        		for (let i = start; i < end; i++) {
          			this.blockTableData.push({
            			number: data[i].number,
            			name: data[i].name,
            			type: data[i].type,
            			id: data[i].id,
            			name: data[i].name,
            			name: data[i].name,
            			msp: data[i].msp,
            			timestamp: data[i].timestamp
          			})
        		}
      		})
    	},
    	// 分页
    	blockCurrentChange() {
      		this.blackFetchData()
    	},
	}
}
</script>