将拿到数据配合element-ui进行分页器展示

从服务器拿到了数据,需要将数据进行分类展示,首先根据条件提取到了每一分类的所有数据,将这个数据放进一个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)
    },

拿到当前页码,不需要再发请求,只需要再剪切一遍总的数据即可。

你可能感兴趣的:(Vue,遇到的问题,ui,javascript,前端)