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

根据服务器获取的数据,通过过滤按类型分类,存储在allData数组中。利用Element-UI的分页器,设置总条数为allData的长度。tableData用于存储当前页显示的数据,通过slice方法动态更新页面切换时的显示内容。handlePageChange函数处理页码变化,无需再次请求数据,仅需重新切片allData。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小婵婵不怕鬼

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值