vue 实现列表分页功能

最新推荐文章于 2025-10-16 14:30:12 发布

原创最新推荐文章于 2025-10-16 14:30:12 发布 · 603 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #javascript #ecmascript

收录于

本文介绍了如何在前端实现分页功能，通过`getQiyeList`方法获取企业列表，并根据`onChange`函数处理页码变化，动态显示分页内容。当页数改变时，根据当前页数和每页大小来截取列表数据，确保只显示所需部分。

   //获取企业列表
    async getQiyeList(data){
      return companyParkSele(data).then(res=>{
        this.qiyeList=res.result.res
        this.total=res.result?res.result.res.length:0
        if(this.total<=this.pageSize){
          this.qiyeShowList=this.qiyeList
        }else{
          this.qiyeShowList=this.qiyeList.slice(0,this.pageSize)
        }
      })
    },
   //点击页数
    onChange (pageNumber) {
      this.qiyeShowList=[]
      if(this.total<pageNumber*this.pageSize){
        this.qiyeShowList=this.qiyeList.slice(this.pageSize*(pageNumber-1))
      }else{
        this.qiyeShowList=this.qiyeList.slice(this.pageSize*(pageNumber-1),this.pageSize*pageNumber)
      }
    },