【elementUI】element-ui 分页--pagination

小墨鱼_z

已于 2023-07-13 23:01:47 修改

阅读量207

点赞数

分类专栏： element-ui 文章标签： ui javascript vue.js

于 2023-07-04 11:26:25 首次发布

本文链接：https://blog.csdn.net/angela_zhaoBei/article/details/131531482

版权

element-ui 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

文章展示了如何在Vue.js应用中使用el-pagination组件进行分页操作，通过监听current-change、prev-click和next-click事件来更新当前页码并异步调用templateListV2Api获取数据。当接收到响应时，更新templateList列表，计算总页数，并设置背景图片。

摘要由CSDN通过智能技术生成

DOM层

<el-pagination

layout="prev, pager, next"

:page-size="pageSize"

:total="total"

:current-page="curPage"

@current-change="currentChange"

@prev-click="prevClick"

@next-click="nextClick"

>

</el-pagination>

js层

return{

page:1,

pageSize:2,

total:0,

curPage:0,

}

  async currentChange(curPage){
      this.curPage = curPage;
      let res = await templateListV2Api(curPage,this.pageSize);
      if(res.code == '000000'){
       this.templateList = res.data.list
       this.total = res.data.total
        this.templateList.forEach(function(e){
        e.roleLineBoxBg = "background-image:url(" + e.bgPath + ") !important;";
          })
        }
      
    },
    async prevClick(curPage){
      let res = await templateListV2Api(curPage,this.pageSize);
      if(res.code == '000000'){
       this.templateList = res.data.list
       this.total = res.data.total
        this.templateList.forEach(function(e){
        e.roleLineBoxBg = "background-image:url(" + e.bgPath + ") !important;";
          })
        }
    },
    async nextClick(curPage){
      let res = await templateListV2Api(curPage,this.pageSize);
      if(res.code == '000000'){
       this.templateList = res.data.list
       this.total = res.data.total
        this.templateList.forEach(function(e){
        e.roleLineBoxBg = "background-image:url(" + e.bgPath + ") !important;";
          })
        }
    },