从服务器拿到了数据,需要将数据进行分类展示,首先根据条件提取到了每一分类的所有数据,将这个数据放进一个data里的空数组。
this.allData = res.data.filter(item => item.type === this.type.value)
element-ui的的分页器展示需要当前页码page、当前页码大小page_size、当前分页器数据总数pageTatol,以及需要写一个改变页码时的方法。上方的this.allData的长度就是这个分页器需要展示的所有的数据即pageTatol。
this.pageTotal =this.allData.length
这个时候先把这个数据放在data中存起来,然后给每一页的总数据赋值.
接下来就是截取总数据中某一页需要展示的数据,这里用的是数组的slice方法。
this.tableData = this.allData.slice((this.query.page-1)*this.query.page_size,this.query.page * this.query.page_size)
这里的this.tableData就是当前页数真正需要展示的数据,但这些代码是拿到数据初次渲染时需要写的,接下来需要写页码改变时的函数。
handlePageChange(val) {
this.query.page = val
this.tableData = this.allData.slice((this.query.page-1)*this.query.page_size,this.query.page * this.query.page_size)
},
拿到当前页码,不需要再发请求,只需要再剪切一遍总的数据即可。