前端实现分页功能，重点是对绑定的表格数据进行简单处理

文章说明

虽然现在后端都会对数据做分页处理，但不排除在某些模块，当需要显示的数据量不是很大时，前端可以自己做一些分页处理。所以用本篇文章记录下，方便以后查阅。

1. 表格数据进行绑定（最重要的一步）

<el-table
  :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
  size="mini"
  highlight-current-row
  style="width: 100%"
  border
>
</el-table>

2. 使用element ui 分页组件

<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="currentPage"
  :page-sizes="[10, 20, 50, 100]"
  :page-size="pageSize"
  layout="total, sizes, prev, pager, next, jumper"
  :total="tableData.length"
></el-pagination>

3. js部分代码

data() {
	return {
		tableData: [],
		currentPage: 1,
	    pageSize: 10,
	    total: 0
	}
}，
mounted() {
	//获取数据给tableData进行赋值
},
methods: {
	handleCurrentChange(val) {
      this.currentPage = val;
    },
    handleSizeChange(val) {
      this.pageSize = val;
    }
}