Vue+element 前端获取列表全部数据再进行分页

项目开发过程中一般会将分页组件进行封装了以后直接使用，但也有可能会有特殊情况，导致前端的分页需要自己来做。这时候我们可以直接用el-pagination来做，在表格数据获取时，对数据进行处理就可以了。代码如下

// 分页组件
<el-pagination background style="margin-top: 20px; text-align: right;"
	@size-change="handleSizeChange" @current-change="handleCurrentChange"
	:current-page="paginationData.pageIndex" :page-sizes="[10, 30, 50]" :page-size="paginationData.pageSize"
    layout="total, sizes, prev, pager, next, jumper" :total="paginationData.total"
>
</el-pagination>
// 数据储存
data() {
    return {
      paginationData: {   // 分页信息
        pageIndex: 1,
        pageSize: 10,
        total: 0
      }, 
      allData: [],  //全部表格数据
      tableData: [],  //当前页表格数据，这个绑定给el-table
    }
},
methods: {
	// 页面数量改变
	handleSizeChange(val) {
	    this.paginationData.pageSize = val
	},
	// 页码改变
	handleCurrentChange(val) {
      this.paginationData.pageIndex = val
    },
    // 全部数据获取
    getData() {
      this.$http.post(url, data).then(res => {
        // 全部数据获取
		this.allData = res
		// 表格数据截取
		this.tableData = this.allData.slice((this.paginationData.pageIndex - 1)*this.paginationData.pageSize,this.paginationData.pageIndex*this.paginationData.pageSize)
		this.paginationData.total = this.allData.length
		this.tableData.forEach((el, i) => {
			el.$index = (this.paginationData.pageIndex - 1) * this.paginationData.pageSize + 1 + i;
		});
	  })
    }
}